跳到主要内容
版本：2.x

数学公式

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@3 rehype-katex@5 [email protected]
warning

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

Import the plugins in docusaurus.config.js:

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

Add them to your content plugin or preset options (usually @docusaurus/preset-classic docs options):

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

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

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
module.exports = {
  stylesheets: [
    {
      href: '/katex/katex.min.css',
      type: 'text/css',
    },
  ],
};
提示

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

The latest versions of rehype-katex (starting from v6.0.0) has moved to ES Modules, a new module system of JavaScript, which Docusaurus doesn't officially support yet. However, it is possible to import rehype-katex dynamically, using an async config creator. Docusaurus 会调用这个创造器，并等待它返回真正的配置对象。

docusaurus.config.js
async function createConfig() {
  // ES Modules are imported with `import()` instead of `require()`, and are imported asynchronously
  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/[email protected]/dist/katex.min.css',
        type: 'text/css',
        integrity:
          'sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ',
        crossorigin: 'anonymous',
      },
    ],
  };
}

module.exports = createConfig;