LaTeX

Nextra 可以使用 KaTeX 在 MDX 中预渲染 LaTeX 表达式，或使用 MathJax 在浏览器中动态渲染数学公式。要启用 LaTeX 支持，你必须在 next.config.mjs 文件中启用 latex 选项：

next.config.mjs


import nextra from 'nextra'
 
const withNextra = nextra({
  latex: true
})
 
export default withNextra()

当值为 true 时将使用 KaTeX 作为数学渲染器。要明确指定渲染器，你可以提供一个对象 { renderer: 'katex' } 或 { renderer: 'mathjax' } 作为 latex: ... 的值。

当启用后，必要的 CSS 和字体将自动包含在你的网站中，你可以通过在 $...$ 中包含内联数学公式，或在带有 math 标签的代码块中编写数学公式：


```math
\int x^2
```

示例

例如，以下 Markdown 代码：

page.md


**毕达哥拉斯方程式**是 $a=\sqrt{b^2 + c^2}$，二次方程公式：
 
```math
x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
```

将被渲染为：

The Pythagorean equation is $a=\sqrt{b^2 + c^2}$ and the quadratic formula:

x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}

你仍可以在包含 LaTeX 表达式的同一行中使用 Markdown 和 MDX 语法。

💡

Tip

If you want to display $ in your content instead of rendering it as an equation, you can escape it with a backslash (\). For example \$e = mc^2\$ will be rendered as $e = mc^2$.

API

KaTeX

rehype-katex is used to pre-render LaTeX expressions in your content. You can pass supported KaTeX options via the options key in your Nextra config. For example, to add a macro \RR that renders as \mathbb{R} you could use the following configuration.

next.config.mjs


const withNextra = nextra({
  latex: {
    renderer: 'katex',
    options: {
      macros: {
        '\\RR': '\\mathbb{R}'
      }
    }
  }
})

查看 KaTeX 的文档获取支持的命令列表。

应用 KaTeX 样式

在你的根 layout 文件的 <head> 元素中添加 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.css" />，因为 <link rel="stylesheet" /> 在 Next.js Metadata API 中不受支持。

或者，你可以直接在你的 MDX 文件中包含 <link rel="stylesheet" />：

katex.mdx


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.css" />
 
# 单次使用 KaTeX 的页面
 
```math
\int_2^3x^3\,\mathrm{d}x
```

MathJax

当启用 MathJax 时（通过设置 latex: { renderer: 'mathjax' }），数学公式会通过 better-react-mathjax 在页面加载时渲染，而不是预渲染。默认情况下，MathJax 通过 MathJax CDN 提供服务，而不是直接包含在你的网站中。

MathJax rendering is enabled by setting renderer: 'mathjax' in your Nextra config.

next.config.mjs


const withNextra = nextra({
  latex: {
    renderer: 'mathjax'
  }
})

你可以通过 Nextra 配置中的 options 键向 better-react-mathjax 传递额外的选项。 config: ... 选项设置 MathJax 配置。但请注意，你只能通过 Nextra 配置中的 options 键向 better-react-mathjax 传递可序列化的选项。¹

For example, to configure MathJax to render \RR as \mathbb{R} you could use the following configuration.

next.config.mjs


const withNextra = nextra({
  latex: {
    renderer: 'mathjax',
    options: {
      config: {
        tex: {
          macros: {
            RR: '\\mathbb{R}'
          }
        }
      }
    }
  }
})

MathJax CDN

默认情况下，MathJax 通过 MathJax CDN 提供服务。要从其他位置（包括你项目中的本地）提供文件，你必须向 latex 配置传递 src: ... 选项。有关 src 选项的详细信息，请参阅 better-react-mathjax 文档。此外，你可能需要将 MathJax 发行版复制到你的 /public 文件夹中以便本地提供服务。

KaTeX 与 MathJax 对比

使用 KaTeX，数学公式会被预渲染，这意味着无闪烁且更快的页面加载。但是，KaTeX 不支持 MathJax 的所有功能，特别是与无障碍相关的功能。

以下两个示例展示了相同的公式分别用 KaTeX（第一个）和 MathJax（第二个）渲染的效果。

\int_2^3x^3\,\mathrm{d}x

\[\int_2^3x^3\,\mathrm{d}x \]

由于 MathJax 的无障碍功能，第二个公式可以通过 Tab 键访问，并具有上下文菜单，帮助屏幕阅读器为视障人士重新处理数学公式。

要传递像函数这样的不可序列化对象，你必须直接在源码中使用 <MathJaxContext config={...} /> 组件。 ↩

LaTeX

示例

API

KaTeX

应用 KaTeX 样式

MathJax

MathJax CDN

KaTeX 与 MathJax 对比

Footnotes