LaTeX Math

The <Latex> component renders mathematical expressions using KaTeX. Use it for equations, formulas, and any mathematical notation.

Note

In MDX, curly braces inside JSX content are parsed as JavaScript expressions. For LaTeX expressions containing curly braces (like \frac{a}{b}), use a JavaScript string literal: {'\\frac{a}{b}'}.

Basic Expressions#

Simple expressions without curly braces work directly:

<Latex>

DisplayE = mc^2

Displaya^2 + b^2 = c^2

Inline math sits in the sentence: sorting the index costs O(n \log n) comparisons.

Fractions and Derivatives#

For LaTeX with curly braces, wrap in a JS string literal:

<Latex>

Display\frac{d}{dx}\left(\int_0^x f(t)\,dt\right) = f(x)

<Latex>

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

Summation#

<Latex>

Display\sum_{i=1}^{n} i = \frac{n(n+1)}{2}

Integrals#

<Latex>

Display\int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi}

Normal Distribution#

<Latex>

Displayf(x) = \frac{1}{\sigma\sqrt{2\pi}}e^{-\frac{(x-\mu)^2}{2\sigma^2}}

Euler's Identity#

<Latex>

Displaye^{i\pi} + 1 = 0

Using Strings vs Direct Content#

Direct content (works for simple expressions)

MDX

<Latex>a^2 + b^2 = c^2</Latex>

Works when the expression has no { or } characters.

String literal (required for complex expressions)

MDX

<Latex>{'\\frac{a}{b}'}</Latex>

Required when the expression contains {...} braces. Use \\ for backslashes in the string.

Props Reference#

Prop	Type	Description
`children`	`string`	LaTeX expression string.

Note

KaTeX supports a large subset of LaTeX. See the KaTeX supported functions documentation for the complete list.

Was this page helpful?