If you need to write mathematical notation in markdown files, KaTeX is the way to go. It’s fast, renders beautifully, and uses familiar LaTeX syntax.

What is KaTeX?

KaTeX is a math typesetting library that renders LaTeX math notation on the web. It’s faster than MathJax and produces crisp, readable formulas. If you’ve ever used LaTeX in academic papers, you already know the syntax.

KaTeX works in many contexts: Hugo sites, GitHub markdown, Jekyll, documentation sites, and more.

Setting Up KaTeX

Setup varies by platform:

Hugo (with Stack theme or similar): Many Hugo themes support KaTeX out of the box. If yours doesn’t, add this to layouts/partials/head/custom.html:

1
2
3
4

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"
        onload="renderMathInElement(document.body);"></script>

GitHub Markdown: GitHub renders KaTeX automatically. Just use the syntax below - no setup needed.

Other platforms: Most static site generators and documentation tools support KaTeX through plugins or themes. Check your platform’s documentation.

Once set up, the syntax below works everywhere.

Basic Syntax

Inline Math

Use single dollar signs for inline math:

1

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 (Block)

Use double dollar signs for centered, display-style equations:

1
2
3

$$
E = mc^2
$$

Renders as:

$$ E = mc^2 $$

Common Examples

Fractions

1
2
3

$$
\frac{a}{b} \quad \frac{1}{2} \quad \frac{\pi}{4}
$$

$$ \frac{a}{b} \quad \frac{1}{2} \quad \frac{\pi}{4} $$

Exponents and Subscripts

1
2
3

$$
x^2 \quad y^{10} \quad a_1 \quad b_{n+1}
$$

$$ x^2 \quad y^{10} \quad a_1 \quad b_{n+1} $$

Square Roots

1
2
3

$$
\sqrt{2} \quad \sqrt{x^2 + y^2} \quad \sqrt[3]{8}
$$

$$ \sqrt{2} \quad \sqrt{x^2 + y^2} \quad \sqrt[3]{8} $$

Greek Letters

1
2
3

$$
\alpha, \beta, \gamma, \delta, \epsilon, \theta, \pi, \sigma, \omega
$$

$$ \alpha, \beta, \gamma, \delta, \epsilon, \theta, \pi, \sigma, \omega $$

Summation and Products

1
2
3

$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

$$ \sum_{i=1}^{n} i = \frac{n(n+1)}{2} $$

1
2
3

$$
\prod_{i=1}^{n} i = n!
$$

$$ \prod_{i=1}^{n} i = n! $$

Integrals

1
2
3

$$
\int_0^1 x^2 \, dx = \frac{1}{3}
$$

$$ \int_0^1 x^2 , dx = \frac{1}{3} $$

Limits

1
2
3

$$
\lim_{x \to \infty} \frac{1}{x} = 0
$$

$$ \lim_{x \to \infty} \frac{1}{x} = 0 $$

Matrices

1
2
3
4
5
6

$$
\begin{bmatrix}
a & b \\
c & d
\end{bmatrix}
$$

$$ \begin{bmatrix} a & b \ c & d \end{bmatrix} $$

Systems of Equations

1
2
3
4
5
6

$$
\begin{cases}
x + y = 5 \\
2x - y = 1
\end{cases}
$$

$$ \begin{cases} x + y = 5 \ 2x - y = 1 \end{cases} $$

Real-World Example: Compound Interest

Here’s a practical formula you might actually use:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

$$
A = P\left(1 + \frac{r}{n}\right)^{nt}
$$

Where:
- $A$ = final amount
- $P$ = principal (initial investment)
- $r$ = annual interest rate (decimal)
- $n$ = compounding frequency per year
- $t$ = time in years

Renders as:

$$ A = P\left(1 + \frac{r}{n}\right)^{nt} $$

Where:

• $A$ = final amount
• $P$ = principal (initial investment)
• $r$ = annual interest rate (decimal)
• $n$ = compounding frequency per year
• $t$ = time in years

Quick Reference

Common Operators

• Multiplication: \times → $\times$
• Division: \div → $\div$
• Plus/minus: \pm → $\pm$
• Dot product: \cdot → $\cdot$

Spacing

Use these for better spacing:

• \, — small space
• \quad — medium space
• \qquad — large space

Example: $a \, b \quad c \qquad d$ renders as $a , b \quad c \qquad d$

Tips

Escaping special characters: If you need to show actual dollar signs in text, escape them: \$100

Alignment: Use & for alignment in multi-line equations with aligned environment:

1
2
3
4
5
6

$$
\begin{aligned}
f(x) &= x^2 + 2x + 1 \\
     &= (x + 1)^2
\end{aligned}
$$

$$ \begin{aligned} f(x) &= x^2 + 2x + 1 \ &= (x + 1)^2 \end{aligned} $$

Curly braces: Use \{ and \} for literal braces: ${1, 2, 3}$

Resources

• KaTeX Supported Functions - Complete reference
• Detexify - Draw a symbol to find its LaTeX command
• LaTeX Math Symbols - Comprehensive PDF

That’s all you need to add beautiful math notation to your posts. The syntax might look intimidating at first, but you’ll quickly remember the common patterns.