Math Rendering

Build-time LaTeX math with KaTeX

sukr renders LaTeX math expressions at build time using KaTeX, producing static HTML and CSS. No client-side JavaScript required.

Inline Math

Use single dollar signs for inline math:

The quadratic formula is $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$.

Renders as: The quadratic formula is x=−b±b2−4ac2ax = \frac{-b \pm \sqrt{b^2-4ac}}{2a}.

Display Math

Use double dollar signs for display (block) math:

$$
E = mc^2
$$

Or fence with math language:

```math
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
```

Supported Features

KaTeX supports a large subset of LaTeX math:

Feature Syntax Rendered
Greek letters \alpha, \beta, \gamma α,β,γ\alpha, \beta, \gamma
Fractions \frac{a}{b} ab\frac{a}{b}
Subscripts/superscripts x_i^2 xi2x_i^2
Summations \sum_{i=1}^{n} i ∑i=1ni\sum_{i=1}^{n} i
Integrals \int_a^b f(x)\,dx ∫abf(x)dx\int_a^b f(x)\,dx
Square roots \sqrt{x^2 + y^2} x2+y2\sqrt{x^2 + y^2}
Matrices \begin{pmatrix} a & b \\ c & d \end{pmatrix} (abcd)\begin{pmatrix} a & b \\ c & d \end{pmatrix}

Display Math Examples

The Gaussian integral:

∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

Euler's identity:

eiπ+1=0e^{i\pi} + 1 = 0

The Schrödinger equation:

iℏ∂∂tΨ=H^Ψi\hbar\frac{\partial}{\partial t}\Psi = \hat{H}\Psi

How It Works

  1. Math delimiters ($...$, $$...$$) are detected during parsing
  2. KaTeX renders the expression to HTML + CSS
  3. Required fonts are embedded inline
  4. Output is pure HTML—no JavaScript

Styling

KaTeX output uses semantic classes. Customize appearance:

.katex {
  font-size: 1.1em;
}

.katex-display {
  margin: 1.5em 0;
  overflow-x: auto;
}

Error Handling

Invalid LaTeX produces an error message inline rather than breaking the build:

$\invalid{command}$

Renders with a red error indicator showing what went wrong.