Guides / Math
This guide explores how to support math (LaTeX) in MDX. MDX supports standard markdown syntax (CommonMark). That means math is not supported by default. Math can be enabled by using a remark plugin: remark-math
, combined with a rehype plugin: either rehype-katex
(KaTeX) or rehype-mathjax
(MathJax). remark plugins can be passed in options.remarkPlugins
and rehype plugins in options.rehypePlugins
. More info on plugins is available in § Extending MDX
Say we have an MDX file like this:
# $\sqrt{a^2 + b^2}$
The above MDX with math can be transformed with the following module:
import {promises as fs} from 'node:fs'
import {compile} from '@mdx-js/mdx'
import rehypeKatex from 'rehype-katex'
import remarkMath from 'remark-math'
main()
async function main() {
console.log(
String(
await compile(await fs.readFile('example.mdx'), {
remarkPlugins: [remarkMath],
rehypePlugins: [rehypeKatex]
})
)
)
}
<>
<h1>
<span className="math math-inline">
<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>
</span>
</h1>
</>
Important: if you chose rehype-katex
, you should also use katex.css
somewhere on the page to style math properly. At the time of writing, the last version is:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.css" integrity="sha384-RZU/ijkSsFbcmivfdRBQDtwuwVqK7GMOw6IMvKyeWL2K5UAlyp6WonmB8m7Jd0Hn" crossorigin="anonymous">