Skip to content

math.mdx

Latest commit

 

History

History
105 lines (83 loc) · 3.08 KB

math.mdx

File metadata and controls

105 lines (83 loc) · 3.08 KB
Raw

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. {/* 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). 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:

# $$\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]
    })
  )
)
Expand equivalent 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>
</>
**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: 
<!-- Get the latest one from: https://katex.org/docs/browser -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+" crossorigin="anonymous">

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

{/* to do: once in a while, get the latest. */}

**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)