数学公式

可以使用 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)$.

http://localhost: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
$$

http://localhost: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 模块 配置文件：

   ES module 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 module 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 releases 下载最新版本，解压并复制 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',
    },
  ],
};