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 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'), {
      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>
</>