版本：3.5.2

数学公式

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

令 $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
$$

http://localhost:3000

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

启用数学公式

启用 KaTeX

安装 `remark-math` 和 `rehype-katex` 插件
- npm
- Yarn
- pnpm
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
警告
确保为 Docusaurus v3（使用 MDX v3）使用 `remark-math 6` 和 `rehype-katex 7`。我们无法保证其他版本可以正常工作。

这两个插件是 仅作为 ES 模块提供。我们建议使用 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],
          },
        },
      ],
    ],
  };
};

在配置中的 `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 资源