数学方程

¥Math Equations

数学方程可以使用 KaTeX 来渲染。

¥Mathematical equations can be rendered using KaTeX.

用法

¥Usage

请阅读 KaTeX 文档以获取更多详细信息。

¥Please read KaTeX documentation for more details.

内联

¥Inline

通过将 LaTeX 方程封装在 $ 之间来编写内联数学方程：

¥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

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)$.

块

¥Blocks

对于方程块或显示模式，请使用换行符和 $$：

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

$$
I = \int_0^{2\pi} \sin(x)\,dx
$$

http://localhost:3000

$$I = \int_0^{2\pi} \sin(x)\,dx$$

启用数学方程

¥Enabling math equations

启用 KaTeX：

¥Enable KaTeX:

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

   ¥Install the remark-math and rehype-katex plugins:

   npm

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

   Yarn

   yarn add remark-math@6 rehype-katex@7

   pnpm

   pnpm add remark-math@6 rehype-katex@7
   警告

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

   ¥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.

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

   ¥These 2 plugins are only available as ES Modules. We 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],
           },
         },
       ],
     ],
   };

   使用 CommonJS 配置文件？

   ¥Using a CommonJS config file?

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

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

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

   ¥Include the KaTeX CSS in your config under stylesheets:

   export default {
     //...
     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',
       },
     ],
   };

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

自托管 KaTeX 资源

¥Self-hosting KaTeX assets

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

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