跳到主要内容
版本：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 remark-math@5 rehype-katex@6
warning

Make sure to use remark-math >= 5 and rehype-katex >= 6 for Docusaurus v3 (using MDX v2).

Those 2 plugins are now only available as ESM packages, and you will need to import them dynamically.

First, turn your site config into an async config creator function:

docusaurus.config.js
module.exports = async function createConfigAsync() {
  return {
    // your site config...
  };
};

It is now possible to import the plugins dynamically and add them to your content plugin or preset options (usually @docusaurus/preset-classic docs options):

remarkPlugins: [(await import('remark-math')).default],
rehypePlugins: [(await import('rehype-katex')).default],

Include the KaTeX CSS in your config under stylesheets:

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

Overall the changes look like:

docusaurus.config.js
module.exports = async function createConfigAsync() {
  return {
    title: 'Docusaurus',
    tagline: 'Build optimized websites quickly, focus on your content',
    presets: [
      [
        '@docusaurus/preset-classic',
        {
          docs: {
            path: 'docs',
            remarkPlugins: [(await import('remark-math')).default],
            rehypePlugins: [(await import('rehype-katex')).default],
          },
        },
      ],
    ],
    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 资源​

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