跳到主要内容

数学公式

Mathematical equations can be rendered using KaTeX.

用法​

请阅读 KaTeX 的文档以了解更多详情。

内联数学公式​

通过将 LaTex 数学公式包裹在两个 $ 标记之间，可以在书写内联数学公式：

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

Let f ⁣:[a,b]→Rf\colon[a,b] \to \R be Riemann integrable. Let F ⁣:[a,b]→RF\colon[a,b]\to\R be F(x)=∫axf(t) dtF(x)= \int_{a}^{x} f(t)\,dt. Then FF is continuous, and at all xx such that ff is continuous at xx, FF is differentiable at xx with F′(x)=f(x)F'(x)=f(x).

数学公式块​

对于数学公式块或显示模式，请使用换行符和 $$ 标记：

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

Configuration​

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

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

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

在 stylesheets 配置项中包含 KaTeX 的 CSS 文件：

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

所有修改总结如下：

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