LaTeX

Nextra uses KaTeX (opens in a new tab) to render LaTeX expressions directly in MDX. 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()

When enabled, KaTeX’s CSS and fonts will be automatically included in your site, and you can start writing math expressions in your MDX files. Using LaTeX within MDX is as simple as wrapping your expression in $ or $$.

Example

For example, the following Markdown code:

page.mdx

The **Pythagorean equation**: $a=\sqrt{b^2 + c^2}$.

will be rendered as:

The Pythagorean equation: $a=\sqrt{b^2 + c^2}$ .

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

To learn more about KaTeX and its supported functions and conventions, visit KaTeX’s documentation (opens in a new tab).

Tailwind CSS Rendering Tables