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:

example.mdx

# $$\sqrt{a^2 + b^2}$$

The above MDX with math can be transformed with the following module:

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'), {
      remarkPlugins: [remarkMath],
      rehypePlugins: [rehypeKatex]
    })
  )
)

Expand equivalent JSX

output.jsx

<>
  <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:

HTML

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

To get the latest link to the stylesheet, go to katex docs.

Note: see also remark-mdx-math-enhanced, which you can use to support JavaScript expressions inside of math (such as to access props or to make calculations)