---
title: Math Rendering
description: Build-time LaTeX math with KaTeX
weight: 5
---

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:

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

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

## Display Math

Use double dollar signs for display (block) math:

```markdown
$$
E = mc^2
$$
```

Or fence with `math` language:

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

## Supported Features

KaTeX supports a large subset of LaTeX math:

- Greek letters: `$\alpha, \beta, \gamma$`
- Fractions: `$\frac{a}{b}$`
- Subscripts/superscripts: `$x_i^2$`
- Summations: `$\sum_{i=1}^{n} i$`
- Integrals: `$\int_a^b f(x)\,dx$`
- Matrices: `$\begin{pmatrix} a & b \\ c & d \end{pmatrix}$`
- And much more...

## 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:

```css
.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:

```markdown
$\invalid{command}$
```

Renders with a red error indicator showing what went wrong.