Skip to content
Mojienjoyment

Type to search…

↑↓to navigate
Esc

LaTeX math with KaTeX, pre-rendered at build time

Inline and display math, matrices, integrals, sums, Maxwell's equations and more — all rendered at build time, with the KaTeX stylesheet loaded only on opt-in pages.

Authoring2min read

The math is compiled statically at build time using @nullpinter/satteri-katex and rendered to plain HTML + CSS.

Zero client JavaScript. Every equation below is server-rendered static markup. KaTeX runs only on the build server.

Add math: true to the post (or page) frontmatter:

---
title: My math-heavy post
math: true
---

The theme component MathStyles.astro is rendered only when math: true, and Astro’s per-page CSS bundling guarantees that katex.min.css (~29 kB) and its woff2 font assets are emitted only on pages that include them. Non-math pages never download the stylesheet.

Wrap inline expressions with single dollar signs: $ ... $.

The Pythagorean theorem states that a2+b2=c2a^2 + b^2 = c^2 for any right triangle with legs aa, bb and hypotenuse cc. Euler’s identity, eiπ+1=0e^{i\pi} + 1 = 0, ties together five fundamental constants. The fine-structure constant is approximately α≈1/137.036\alpha \approx 1/137.036.

To escape a literal dollar sign outside math, write \$, e.g. $5.00.

Use $$ ... $$ on their own lines for centred display equations.

x=−b±b2−4ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

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

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

The fundamental theorem of calculus:

∫abf′(x) dx=f(b)−f(a)\int_a^b f'(x), dx = f(b) - f(a)

Taylor series expansion:

f(x)=∑n=0∞f(n)(a)n!(x−a)nf(x) = \sum_{n=0}^{\infty} \frac{f^{(n)}(a)}{n!} (x - a)^n

A 2×22 \times 2 matrix and its determinant:

A=(abcd),det⁡(A)=ad−bcA = \begin{pmatrix} a & b \ c & d \end{pmatrix},\quad \det(A) = ad - bc

A linear system written compactly:

{2x+3y=54x−y=1\begin{cases} 2x + 3y = 5 \ 4x - y = 1 \end{cases}

The Gaussian probability density function:

f(x∣μ,σ2)=1σ2π e−(x−μ)22σ2f(x \mid \mu, \sigma^2) = \frac{1}{\sigma \sqrt{2\pi}}, e^{-\frac{(x-\mu)^2}{2\sigma^2}}

Bayes’ theorem:

P(A∣B)=P(B∣A) P(A)P(B)P(A \mid B) = \frac{P(B \mid A), P(A)}{P(B)}

Maxwell’s equations in SI units:

∇⋅E=ρε0∇⋅B=0∇×E=−∂B∂t∇×B=μ0J+μ0ε0∂E∂t\begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \ \nabla \cdot \mathbf{B} &= 0 \ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \ \nabla \times \mathbf{B} &= \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \end{aligned}

Schrödinger’s time-dependent equation:

iℏ∂∂tΨ(r,t)=H^ Ψ(r,t)i\hbar \frac{\partial}{\partial t} \Psi(\mathbf{r}, t) = \hat{H}, \Psi(\mathbf{r}, t)

  • A blank line is required before and after a $$ block, otherwise Markdown can swallow the delimiters.
  • The same syntax works in both .md and .mdx.
  • Inside MDX, do not put { immediately after $ unless you intend a JSX expression — escape with \{ if needed.
  • Forgot math: true? You’ll see raw $x^2$ text instead of a rendered formula. Add the flag and rebuild.

Pair this with the code blocks post — the two together cover everything you need to write technical content on this theme.