跳到主要内容
版本：3.0.0-rc.1

数学公式

Mathematical equations can be rendered using KaTeX.

Usage​

Please read KaTeX documentation for more details.

Inline​

Write inline math equations by wrapping LaTeX equations between $:

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

令 fcolon[a,b]toRf\\colon[a,b]\\to\\R 为一个黎曼可积的函数。 令 Fcolon[a,b]toRF\\colon[a,b]\\to\\R 等于 F(x)=int_axf(t),dtF(x)=\\int\_{a}^{x} f(t),dt。 因此，FF 是连续的，并且对于所有使得 ff 在 xx 处连续的 xx，FF 都在 xx 处可微，并且有 F′(x)=f(x)F'(x)=f(x).

Blocks​

For equation block or display mode, use line breaks and $$:

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

Configuration​

To enable KaTeX, you need to install remark-math and rehype-katex plugins.

npm install --save remark-math@6 rehype-katex@7
注意

Make sure to use remark-math 6 and rehype-katex 7 for Docusaurus v3 (using MDX v3). We can't guarantee other versions will work.

Those 2 plugins are now only available as ES Modules. To simplify usage, it is recommended to use an ES Modules config file:

ES module 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],
        },
      },
    ],
  ],
};
Using a CommonJS config file?
If you decide to use a CommonJS config file, it is possible to load those ES module plugins thanks to dynamic imports and an async config creator function:
CommonJS module 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],
          },
        },
      ],
    ],
  };
};

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

Self-hosting KaTeX assets​

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
export default {
  stylesheets: [
    {
      href: '/katex/katex.min.css',
      type: 'text/css',
    },
  ],
};