数学公式

可以使用 KaTeX 来渲染数学公式。

请参阅下文了解如何启用它们。

用法

请阅读 KaTeX 文档以获取更多详情。

行内公式

通过在 $ 符号之间包裹 LaTeX 公式来书写行内数学公式：

设 $f\colon[a,b]\to\R$ 是黎曼可积的。
设 $F\colon[a,b]\to\R$ 为$F(x)=\int_{a}^{x} f(t)\,dt$。
那么 $F$ 是连续的，
并且在所有 $f$ 连续的点 $x$ 处，$F$ 在 $x$ 处可微，且 $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$ 是连续的，并且在所有 $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
- 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 模块可用。我们推荐使用 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/npm/[email protected]/dist/katex.min.css',
      type: 'text/css',
      integrity:
        'sha256-GQlRJzV+1tKf4KY6awAMkTqJ9/GWO3Zd03Fel8mFLnU=',
      crossorigin: 'anonymous',
    },
  ],
};

aibase站长提示

Docusaurus官网示例版本为[email protected]，我无法使用，使用[email protected]和对应哈希值后成功显示数学公式。

哈希值获取方法，在 https://www.jsdelivr.com/package/npm/katex?tab=files&path=dist 找到对应版本，点右侧复制'HTML+SRI'包含哈希值和href链接。

查看配置文件示例

docusaurus.config.js
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default {
  title: '道格龙（Docusaurus）',
  tagline: '快速构建优化的网站，专注于你的内容',
  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',
    },
  ],
};

用法​

行内公式​

公式块​

启用数学公式​

自托管 KaTeX 资源​

用法

行内公式

公式块

启用数学公式

自托管 KaTeX 资源