LaTeX

Nextra can use KaTeX to pre-render LaTeX expressions directly in MDX or MathJax to dynamically render math in the browser. To enable LaTeX support, you must enable the latex option in your next.config.mjs file:

next.config.mjs

import nextra from 'nextra'
 
const withNextra = nextra({
  latex: true
})
 
export default withNextra()

A value of true will use KaTeX as the math renderer. To explicitly specify the renderer, you may instead provide an object { renderer: 'katex' } or { renderer: 'mathjax' } as the value to latex: ....

When enabled, the required CSS and fonts will be automatically included in your site, and you can start writing math expressions by enclosing inline math in $...$ or display math in a math-labeled fenced code block:

```math
\int x^2
```

Example

For example, the following Markdown code:

page.md

The **Pythagorean equation** is $a=\sqrt{b^2 + c^2}$ and the quadratic formula:
 
```math
x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
```

will be rendered as:

The Pythagorean equation is $a=\sqrt{b^2 + c^2}$ and the quadratic formula:

x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}

You can still use Markdown and MDX syntax in the same line as your LaTeX expression.

💡

If you want to display $ in your content instead of rendering it as an equation, you can escape it with a backslash (\). For example \$e = mc^2\$ will be rendered as $e = mc^2$.

API

KaTeX

rehype-katex is used to pre-render LaTeX expressions in your content. You can pass supported KaTeX options via the options key in your Nextra config. For example, to add a macro \RR that renders as \mathbb{R} you could use the following configuration.

next.config.mjs

const withNextra = nextra({
  latex: {
    renderer: 'katex',
    options: {
      macros: {
        '\\RR': '\\mathbb{R}'
      }
    }
  }
})

See KaTeX’s documentation for a list of supported commands.

Npm2Yarn Rendering Tables