Skip to main content
Version: 3.7.0

数学方程

数学方程可以使用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

设 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 是连续的，并且在所有 xx 处，如果 ff 在 xx 处连续，则 FF 在 xx 处可微，且 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

启用数学公式​

启用KaTeX：

  1. 安装 remark-math 和 rehype-katex 插件：

    npm install --save remark-math@6 rehype-katex@7
    warning

    确保为Docusaurus v3（使用MDX v3）使用remark-math 6和rehype-katex 7。我们不能保证其他版本会正常工作。

  2. 这两个插件仅作为ES模块提供。我们建议使用ES模块配置文件：

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

    使用一个 CommonJS 配置文件？

    如果您决定使用CommonJS配置文件，可以通过动态导入和异步配置创建函数来加载这些ES模块插件：

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

  3. 在你的配置中的stylesheets下包含KaTeX CSS：

    export 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',
        },
      ],
    };
See a config file example
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/[email protected]/dist/katex.min.css',
      type: 'text/css',
      integrity:
        'sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM',
      crossorigin: 'anonymous',
    },
  ],
};

自托管 KaTeX 资源​

从CDN源加载样式表、字体和JavaScript库对于流行的库和资源来说是一个好习惯，因为它减少了您需要托管的资源量。如果您更喜欢自托管katex.min.css（以及所需的KaTeX字体），您可以从KaTeX GitHub发布页面下载最新版本，解压并复制katex.min.css和fonts目录（仅.woff2字体类型应该足够）到您网站的static目录，并在docusaurus.config.js中，将样式表的href从CDN URL替换为您的本地路径（例如，/katex/katex.min.css）。

docusaurus.config.js
export default {
  stylesheets: [
    {
      href: '/katex/katex.min.css',
      type: 'text/css',
    },
  ],
};