math.server.mdx

import {Note} from '../_component/note.server.js' export const navSortSelf = 3 export const info = { author: [ {name: 'Titus Wormer', github: 'wooorm', twitter: 'wooorm'} ], published: new Date('2021-10-06'), modified: new Date('2022-02-01') }

Math

This guide explores how to support math (LaTeX) in MDX. {/* more */} 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]
      })
    )
  )
}

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css" integrity="sha384-RZU/ijkSsFbcmivfdRBQDtwuwVqK7GMOw6IMvKyeWL2K5UAlyp6WonmB8m7Jd0Hn" crossorigin="anonymous">

**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 props or to make calculations)