import {Note} from '../_component/note.jsx'

export const info = { author: [ {github: 'wooorm', name: 'Titus Wormer'} ], modified: new Date('2025-01-27'), published: new Date('2021-10-06') } export const navSortSelf = 3

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). Like other remark and rehype plugins, they can be passed in remarkPlugins and rehypePlugins, respectively, in ProcessorOptions. More info on plugins is available in § Extending MDX

Say we have an MDX file like this:

mdx

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

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

// @filename: example.js
/// <reference types="node" />
// ---cut---
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]
    })
  )
)

<details> <summary>Expand equivalent JSX</summary>

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

</details> <Note type="important"> **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

<!-- Get the latest one from: https://katex.org/docs/browser -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+" crossorigin="anonymous">

To get the latest link to the stylesheet, go to katex docs. </Note>

<Note type="info"> **Note:** see also [`remark-mdx-math-enhanced`](https://github.com/goodproblems/remark-mdx-math-enhanced), which you can use to support JavaScript expressions inside of math (such as to access properties or to make calculations) </Note>