80 lines
1.5 KiB
Markdown
80 lines
1.5 KiB
Markdown
---
|
|
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.
|