Skip to content

Latest commit

 

History

History
99 lines (78 loc) · 2.9 KB

math.mdx

File metadata and controls

99 lines (78 loc) · 2.9 KB
Raw

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

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

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). Plugins can be passed in rehypePlugins and remarkPlugins in ProcessorOptions. 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'), {
      rehypePlugins: [rehypeKatex],
      remarkPlugins: [remarkMath]
    })
  )
)
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.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`](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)