數學方程式

可以使用 KaTeX 來呈現數學方程式。

使用方式

請參閱 KaTeX 文件以取得更多詳細資訊。

內嵌

透過在 LaTeX 方程式之間加入 $ 來編寫內嵌數學方程式

Let $f\colon[a,b]\to\R$ be Riemann integrable. Let $F\colon[a,b]\to\R$ be
$F(x)=\int_{a}^{x} f(t)\,dt$. Then $F$ is continuous, and at all $x$ such that
$f$ is continuous at $x$, $F$ is differentiable at $x$ with $F'(x)=f(x)$.

https://127.0.0.1:3000

Let $f\colon[a,b] \to \R$ be Riemann integrable. Let $F\colon[a,b]\to\R$ be $F(x)= \int_{a}^{x} f(t)\,dt$. Then $F$ is continuous, and at all $x$ such that $f$ is continuous at $x$, $F$ is differentiable at $x$ with $F'(x)=f(x)$.

區塊

對於方程式區塊或顯示模式，請使用換行符號和 $$

$$
I = \int_0^{2\pi} \sin(x)\,dx
$$

https://127.0.0.1:3000

$$I = \int_0^{2\pi} \sin(x)\,dx$$

啟用數學公式

啟用 KaTeX

1. 安裝 remark-math 和 rehype-katex 外掛

   npm

   npm install --save remark-math@6 rehype-katex@7

   Yarn

   yarn add remark-math@6 rehype-katex@7

   pnpm

   pnpm add remark-math@6 rehype-katex@7
   警告

   務必針對 Docusaurus v3 (使用 MDX v3)，使用 remark-math 6 和 rehype-katex 7。我們無法保證其他版本將可以使用。

2. 這兩個外掛僅以下載模組的形式提供。建議使用 ES 模組 組態檔

   ES 模組 docusaurus.config.js

   import remarkMath from 'remark-math';
   import rehypeKatex from 'rehype-katex';
   
   export default {
     presets: [
       [
         '@docusaurus/preset-classic',
         {
           docs: {
             path: 'docs',
             remarkPlugins: [remarkMath],
             rehypePlugins: [rehypeKatex],
           },
         },
       ],
     ],
   };

   使用 CommonJS 組態檔嗎？

   如果您決定使用 CommonJS 組態檔，那麼可以透過動態匯入和非同步組態函式，來載入那些 ES 模組外掛

   CommonJS 模組 docusaurus.config.js

   module.exports = async function createConfigAsync() {
     return {
       presets: [
         [
           '@docusaurus/preset-classic',
           {
             docs: {
               path: 'docs',
               remarkPlugins: [(await import('remark-math')).default],
               rehypePlugins: [(await import('rehype-katex')).default],
             },
           },
         ],
       ],
     };
   };

3. 在 stylesheets 下的組態中，將 KaTeX CSS 包含在內

   export default {
     //...
     stylesheets: [
       {
         href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css',
         type: 'text/css',
         integrity:
           'sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM',
         crossorigin: 'anonymous',
       },
     ],
   };

查看組態檔案範例

docusaurus.config.js

import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default {
  title: 'Docusaurus',
  tagline: 'Build optimized websites quickly, focus on your content',
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          path: 'docs',
          remarkPlugins: [remarkMath],
          rehypePlugins: [rehypeKatex],
        },
      },
    ],
  ],
  stylesheets: [
    {
      href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css',
      type: 'text/css',
      integrity:
        'sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM',
      crossorigin: 'anonymous',
    },
  ],
};

自行託管 KaTeX 資源

載入 CDN 來源的樣式表、字型和 JavaScript 程式庫是一個不錯的做法，這適用於流行的程式庫和資源，因為這可以減少您必須主機的資源數量。如果您偏好自行主機 katex.min.css (以及必要的 KaTeX 字型)，您可以從 KaTeX GitHub 版本 下載最新版本，解壓縮和複製 katex.min.css 和 fonts 目錄 (僅需要 .woff2 字型類型) 到您的站台的 static 目錄中，並在 docusaurus.config.js 中，將樣式表的 href 從 CDN URL 替換為您的當地路徑 (例如，/katex/katex.min.css)。

docusaurus.config.js

export default {
  stylesheets: [
    {
      href: '/katex/katex.min.css',
      type: 'text/css',
    },
  ],
};