跳到主要内容
版本：2.1.0

数学公式

数学方程可通过 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 remark-math@3 rehype-katex@5 hast-util-is-element@1.1.0
注意

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

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

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

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

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

Include the KaTeX CSS in your config under stylesheets:

stylesheets: [
  {
    href: 'https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css',
    type: 'text/css',
    integrity:
      'sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM',
    crossorigin: 'anonymous',
  },
],

Overall the changes look like:

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/katex@0.13.24/dist/katex.min.css',
      type: 'text/css',
      integrity:
        'sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM',
      crossorigin: 'anonymous',
    },
  ],
};

自托管的 KaTeX 资源​

Loading stylesheets, fonts, and JavaScript libraries from CDN sources is a good practice for popular libraries and assets, since it reduces the amount of assets you have to host. In case you prefer to self-host the katex.min.css (along with required KaTeX fonts), you can download the latest version from KaTeX GitHub releases, extract and copy katex.min.css and fonts directory (only .woff2 font types should be enough) to your site's static directory, and in docusaurus.config.js, replace the stylesheet's href from the CDN URL to your local path (say, /katex/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/katex@0.15.2/dist/katex.min.css',
        type: 'text/css',
        integrity:
          'sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ',
        crossorigin: 'anonymous',
      },
    ],
  };
}

module.exports = createConfig;