LaTeX

Nextra 可以使用 KaTeX  来在 MDX 中直接预渲染 LaTeX 表达式，或者使用 MathJax  在浏览器中动态渲染数学公式。

设置

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

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

npm i katex

pnpm add katex

yarn add katex

bun add katex

import 'katex/dist/katex.min.css'

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

示例

例如，以下 Markdown 代码：

The **Pythagorean equation** is $a=\sqrt{b^2 + c^2}$ and the quadratic formula:
 
```math
x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
```

将被渲染为：

您仍然可以在同一行中使用 Markdown 和 MDX 语法 与 LaTeX 表达式结合。

API

KaTeX

rehype-katex 用于预渲染您内容中的 LaTeX 表达式。您可以通过 Nextra 配置中的 options 键传递支持的 KaTeX 选项 。例如，要添加一个渲染为 \mathbb{R} 的宏 \RR，您可以使用以下配置。

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

有关支持的命令列表，请参阅 KaTeX 的文档 。

MathJax

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

MathJax 渲染通过在 Nextra 配置中设置 renderer: 'mathjax' 来启用。

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

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

例如，要配置 MathJax 将 \RR 渲染为 \mathbb{R}，您可以使用以下配置。

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

MathJax CDN

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

KaTeX 与 MathJax

使用 KaTeX，数学会被预渲染，这意味着无闪烁且页面加载更快。然而，KaTeX 不支持 MathJax 的所有功能，尤其是与可访问性相关的功能。

以下两个示例显示了相同的公式，使用 KaTeX（第一个）和 MathJax（第二个）渲染。

由于 MathJax 的可访问性功能，第二个公式是标签可访问的，并且具有上下文菜单，帮助屏幕阅读器为视障人士重新处理数学。