Math

TeX formulas rendered with KaTeX, inline and as display blocks.

Formulas are parsed from TeX syntax and rendered to HTML at compile time with KaTeX, so nothing runs in the browser. The output includes MathML for screen readers.

Import the stylesheet once next to the base styles. It ships the KaTeX fonts, so no extra package is needed.

app/layout.tsx
import "pzzadocs/styles.css";
import "pzzadocs/math.css";

Display math#

A block between two $$ lines renders centred in its own surface.

∫0∞e−x2 dx=π2\int_{0}^{\infty} e^{-x^2} \, dx = \frac{\sqrt{\pi}}{2}
md
$$
\int_{0}^{\infty} e^{-x^2} \, dx = \frac{\sqrt{\pi}}{2}
$$

Long formulas scroll horizontally instead of wrapping.

f(x)=∑n=0∞f(n)(a)n!(x−a)nwheref(n)(a)=dnfdxn∣x=af(x) = \sum_{n=0}^{\infty} \frac{f^{(n)}(a)}{n!} (x - a)^n \quad\text{where}\quad f^{(n)}(a) = \left.\frac{d^n f}{dx^n}\right|_{x=a}

Inline math#

Wrap a formula in $$ inside a sentence to keep it on the line, for example E=mc2E = mc^2 or the quadratic formula x=−b±b2−4ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}.

md
... for example $$E = mc^2$$ or the quadratic formula $$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$.

Single-dollar spans such as $x$ are plain text by default, so prices like $5 and $10 never turn into formulas. Set math.singleDollar to true in the config to enable the shorter syntax.

docs.config.ts
export default defineConfig({
  math: { singleDollar: true },
});

Matrices and alignment#

(abcd)(xy)=(ax+bycx+dy)\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix} ∇⋅E=ρε0∇⋅B=0∇×E=−∂B∂t\begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \end{aligned}

Disabling#

Set math.enabled to false to skip the parser entirely. Dollar signs are then ordinary characters everywhere.

docs.config.ts
export default defineConfig({
  math: { enabled: false },
});

Behaviour#

  • Code blocks and inline code are never parsed for math, so $$ inside a fence is left alone.
  • The Markdown and llms.txt outputs keep the TeX source, which assistants read natively.
  • Headings that contain math use the plain TeX text for their ids and the table of contents.