Skip to navigation

数学

本指南探讨如何在 MDX 中支持数学 (LaTeX)。 MDX 支持标准 Markdown 语法 (CommonMark)。 这意味着默认情况下不支持数学。 可以使用 remark 插件启用数学: remark-math,结合 rehype 插件: rehype-katex (KaTeX) 或 rehype-mathjax (MathJax)。 与其他 remark 和 rehype 插件一样,它们可以在 分别在 ProcessorOptions 中的 remarkPluginsrehypePlugins 中传递。 有关插件的更多信息可在 § 扩展 MDX 中找到

假设我们有一个像这样的 MDX 文件:

example.mdx
# $$\sqrt{a^2 + b^2}$$

上面带有数学的 MDX 可以使用以下模块进行转换:

example.js
import fs from 'node:fs/promises'
import {compile} from '@mdx-js/mdx'
import rehypeKatex from 'rehype-katex'
import remarkMath from 'remark-math'

console.log(
  String(
    await compile(await fs.readFile('example.mdx'), {
      rehypePlugins: [rehypeKatex],
      remarkPlugins: [remarkMath]
    })
  )
)
展开等效的 JSX
output.jsx
<>
  <h1>
    <span className="katex">
      <span className="katex-mathml">
        <math xmlns="http://www.w3.org/1998/Math/MathML">…</math>
      </span>
      <span className="katex-html" aria-hidden="true">
        …
      </span>
    </span>
  </h1>
</>

重要的: 如果你选择 rehype-katex,你还应该在页面上的某个位置使用 katex.css 以正确设置数学样式。 在撰写本文时,最后一个版本是:

HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">

要获取样式表的最新链接,请转到 katex docs

注意: 另请参阅 remark-mdx-math-enhanced,你可以使用它来支持数学内部的 JavaScript 表达式(例如访问 props 或进行计算)

MDX 中文网 - 粤ICP备13048890号