版本：3.8.1

数学公式

数学方程式可以使用 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://:3000

设 $f\colon[a,b] \to \R$ 为黎曼可积函数。设 $F\colon[a,b]\to\R$ 使得 $F(x)= \int_{a}^{x} f(t)\,dt$ 。则 $F$ 连续，并且在所有 $x$ 处，若 $f$ 在 $x$ 处连续，则 $F$ 在 $x$ 处可导，且 $F'(x)=f(x)$ 。

块级公式

对于块级公式或显示模式，使用换行符和 $$

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

https://:3000

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

启用数学方程式

启用 KaTeX

安装 remark-math 和 rehype-katex 插件
- npm
- Yarn
- pnpm
- Bun
npm install --save remark-math@6 rehype-katex@7
yarn add remark-math@6 rehype-katex@7
pnpm add remark-math@6 rehype-katex@7
bun add remark-math@6 rehype-katex@7
警告
请确保 Docusaurus v3（使用 MDX v3）使用 remark-math 6 和 rehype-katex 7。我们无法保证其他版本能够正常工作。

这两个插件仅作为 ES Modules 提供。我们建议使用 ES Modules 配置文件

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],
          },
        },
      ],
    ],
  };
};

在 stylesheets 下的配置中包含 KaTeX CSS

export default {
  //...
  stylesheets: [
    {
      href: 'https://cdn.jsdelivr.net.cn/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.cn/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',
    },
  ],
};

用法​

行内公式​

块级公式​

启用数学方程式​

自托管 KaTeX 资源​

用法

行内公式

块级公式

启用数学方程式

自托管 KaTeX 资源