跳到主要内容
版本：Canary 🚧

数学公式

数学方程可通过 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$ 处连续的 $x$，$F$ 都在 $x$ 处可微，并且有 $F'(x)=f(x)$.
http://localhost:3000

令 f ⁣:[a,b]→Rf\colon[a,b]\to\R 为一个黎曼可积的函数。 令 F ⁣:[a,b]→RF\colon[a,b]\to\R 等于 F(x)=∫axf(t) dtF(x)=\int_{a}^{x} f(t)\,dt。 因此，FF 是连续的，并且对于所有使得 ff 在 xx 处连续的 xx，FF 都在 xx 处可微，并且有 F′(x)=f(x)F'(x)=f(x).

块级公式​

要书写块级公式（也就是显示模式 display mode），要使用 $$ 和一个换行：

$$
I = \int_0^{2\pi} \sin(x)\,dx
$$
http://localhost:3000
I=∫02πsin⁡(x) dxI = \int_0^{2\pi} \sin(x)\,dx

配置​

要启用 KaTeX，你需要安装 remark-math 和 rehype-katex 两个插件。

npm install --save [email protected] [email protected] [email protected]
注意

注意使用完全相同的版本。 最新版本与 Docusaurus 2 不兼容。

在 docusaurus.config.js 中导入插件：

const math = require('remark-math');
const katex = require('rehype-katex');

把它们添加到你的内容插件或预设选项（通常是 @docusaurus/preset-classic 的 docs 选项）：

remarkPlugins: [math],
rehypePlugins: [katex],

在 stylesheets 配置下添加 KaTeX CSS：

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
const math = require('remark-math');
const katex = require('rehype-katex');

module.exports = {
  title: 'Docusaurus',
  tagline: 'Build optimized websites quickly, focus on your content',
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          path: 'docs',
          remarkPlugins: [math],
          rehypePlugins: [katex],
        },
      },
    ],
  ],
  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.min.css）。

docusaurus.config.js
module.exports = {
  stylesheets: [
    {
      href: '/katex/katex.min.css',
      type: 'text/css',
    },
  ],
};
提示

只有当你真的需要 KaTeX\KaTeX 的最新功能时，才考虑使用新版本。 大多数用户应该用较旧的版本也能达到一样的效果。

rehype-katex 的最新版本（从 v6.0.0 开始）已经迁移到 ES 模块。这是一个新的 JavaScript 模块系统，Docusaurus 尚未正式支持。 然而，你可以通过导出一个异步配置创造器 (async config creator) 来动态导入 rehype-katex。 Docusaurus 会调用这个创造器，并等待它返回真正的配置对象。

docusaurus.config.js
async function createConfig() {
  // ES 模块需要用 `import()` 而不是 `require()` 导入，并且是异步导入的
  const katex = (await import('rehype-katex')).default;
  return {
    // ...
  };
}

在这种情况下，总的配置修改会看起来像这样：

docusaurus.config.js
const math = require('remark-math');

async function createConfig() {
  const katex = (await import('rehype-katex')).default;
  return {
    title: 'Docusaurus',
    tagline: 'Build optimized websites quickly, focus on your content',
    presets: [
      [
        '@docusaurus/preset-classic',
        {
          docs: {
            path: 'docs',
            remarkPlugins: [math],
            rehypePlugins: [katex],
          },
        },
      ],
    ],
    stylesheets: [
      {
        href: 'https://cdn.jsdelivr.net/npm/kate[email protected]/dist/katex.min.css',
        type: 'text/css',
        integrity:
          'sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ',
        crossorigin: 'anonymous',
      },
    ],
  };
}

module.exports = createConfig;