数学方程

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

块

对于公式块或显示模式，使用换行符和$$:

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

http://localhost:3000

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

配置

要启用 KaTeX，您需要安装remark-math和rehype-katex插件。

npm

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

Yarn

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

pnpm

pnpm add remark-math@5 rehype-katex@6

警告

确保 Docusaurus v3 使用remark-math >= 5和rehype-katex >= 6(使用 MDX v2)。

这两个插件现在只能作为 ESM 包使用，你需要动态导入它们。

首先，将您的站点配置转换为异步配置创建器函数:

docusaurus.config.js

module.exports = async function createConfigAsync() {
  return {
    // your site config...
  };
};

现在可以动态导入插件并将它们添加到您的内容插件或预设选项中(通常是@docusaurus/preset-classic docs 选项):

remarkPlugins: [(await import('remark-math')).default],
rehypePlugins: [(await import('rehype-katex')).default],

在样式表下的配置中包含 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

module.exports = async function createConfigAsync() {
  return {
    title: "Docusaurus",
    tagline: "Build optimized websites quickly, focus on your content",
    presets: [
      [
        "@docusaurus/preset-classic",
        {
          docs: {
            path: "docs",
            remarkPlugins: [(await import("remark-math")).default],
            rehypePlugins: [(await import("rehype-katex")).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",
      },
    ],
  };
};

自托管 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

module.exports = {
  stylesheets: [
    {
      href: "/katex/katex.min.css",
      type: "text/css",
    },
  ],
};