46c00c7729
Migrate all 17 docs/content/ files from --- YAML to +++ TOML frontmatter delimiters and key = value syntax. Update 8 embedded frontmatter examples in 7 documentation pages to match (configuration, content-organization, getting-started, security, sections, sitemap, feeds, templates). Update configuration.md frontmatter reference table: add draft and aliases fields, correct date type from string to date.
2.6 KiB
2.6 KiB
+++ 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:
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:
$$
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} |
\frac{a}{b} |
| Subscripts/superscripts | x_i^2 |
x_i^2 |
| Summations | \sum_{i=1}^{n} i |
\sum_{i=1}^{n} i |
| Integrals | \int_a^b f(x)\,dx |
\int_a^b f(x)\,dx |
| Square roots | \sqrt{x^2 + y^2} |
\sqrt{x^2 + y^2} |
| Matrices | \begin{pmatrix} a & b \\ c & d \end{pmatrix} |
\begin{pmatrix} a & b \\ c & d \end{pmatrix} |
Display Math Examples
The Gaussian integral:
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
Euler's identity:
e^{i\pi} + 1 = 0
The Schrödinger equation:
i\hbar\frac{\partial}{\partial t}\Psi = \hat{H}\Psi
How It Works
- Math delimiters (
$...$,$$...$$) are detected during parsing - KaTeX renders the expression to HTML + CSS
- Required fonts are embedded inline
- 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.