Math

Dollar signs mark math in any MDX page. The remark-math and rehype-katex plugins in app/[[...slug]]/page.tsx hand each expression to KaTeX, which emits HTML and MathML at build time, and app/layout.tsx loads katex/dist/katex.min.css once for the whole site. Nothing parses math in the browser, so an equation never reflows the page after it loads.

Quick Start

One dollar sign on each side keeps the expression in the flow of a sentence.

The mass-energy equivalence formula is $E = mc^2$.

The mass-energy equivalence formula is $E = mc^2$.

Adding Options

Two dollar signs on their own lines give you a centered display equation instead, and inline math can sit in the same paragraph. A code fence tagged math produces the same centered block without any dollar signs, which helps when an editor keeps auto-pairing them.

The Pythagorean theorem reads $a^2 + b^2 = c^2$, while the binomial coefficient gets more room as a block:

Lift coefficient, written as a math fence:

The Pythagorean theorem reads $a^2 + b^2 = c^2$, while the binomial coefficient
gets more room as a block:
 
$$
\frac{n!}{k!(n-k)!} = \binom{n}{k}
$$
 
Lift coefficient, written as a `math` fence:
 
```math
L = \frac{1}{2} \rho v^2 S C_L
```

Advanced

KaTeX ships the LaTeX environments too. aligned stacks several equations on a shared & anchor, cases branches a definition, bmatrix draws a square-bracketed matrix, and \tag pins a manual equation number to the right margin. A double backslash ends a row in all of them.

$$
\begin{aligned}
\sum_{i=1}^{n} i &= \frac{n(n+1)}{2} \\
\int_{0}^{\infty} e^{-x^2}\,dx &= \frac{\sqrt{\pi}}{2}
\end{aligned}
$$
 
$$
|x| = \begin{cases}
x & \text{if } x \ge 0 \\
-x & \text{otherwise}
\end{cases}
$$
 
$$
\begin{bmatrix} 1 & 0 \\ 0 & 1 \end{bmatrix} \tag{1}
$$

Other constructs from the same reference behave the same way: roots as $\sqrt[3]{x}$, limits as $\lim_{x \to 0} \frac{\sin x}{x} = 1$, braces as $\overbrace{a+b+c}^{\text{sum}}$, vectors as $\vec{v} \cdot \hat{n}$, Greek as $\alpha\,\beta\,\Sigma$, color as $\textcolor{#16a34a}{x^2}$, and units through \text, as in $v_{\text{max}} = 3\ \text{m/s}$.

Escaping and error handling

A backslash in front of a dollar sign keeps it literal, so prices and shell variables survive a page that also uses math. The plan costs $49 and the extra seat costs $9.

The plan costs \$49 and the extra seat costs \$9.

An expression KaTeX cannot parse does not fail the build. It renders in place as red text with the parser message in the title attribute, so the rest of the article still ships and the broken formula is easy to spot in review.

KaTeX runs here without extension packages, so chemistry macros such as \ce from mhchem are undefined and land in that same red error state. Stay inside the KaTeX function reference and everything listed there works.

Display equations wider than the article scroll sideways on their own, so a long derivation never stretches the page on a phone. Snippets get the same treatment: components/Snippet.tsx registers remark-math and rehype-katex as well, so an equation written once in snippets/ renders identically everywhere it is embedded.

Options