A Typesetting Showcase

This post exists to stress-test the site's rendering pipeline. Every element you see here maps to a CSS rule in style.css and a marked extension in build.ts.

Typography

Normal paragraph text sits at 18px with a line-height of 1.8, set in Inter. The serif - Fraunces - appears in headings, blockquotes, and the lede above.

Third-level heading

You can go three levels deep. Beyond that you're probably outlining a dissertation, not a blog post.

---

Lists

Unordered:

• The derivative is the instantaneous rate of change
• The integral is the signed area under a curve
• They are inverses of each other, this is not obvious

Ordered:

1. State the problem clearly
2. Work a small example by hand
3. Generalise
4. Check edge cases

Nested:

• Analysis
  • Real analysis
  • Complex analysis
• Algebra
  • Linear algebra
  • Abstract algebra

---

Inline code and code blocks

Inline: the Euler identity is often written as e^(iπ) + 1 = 0 before someone reaches for LaTeX.

A code block:

function parseFrontmatter(raw: string) {
  const match = raw.match(/^---\r?\n([\s\S]+?)\r?\n---\r?\n([\s\S]*)$/);
  if (!match) throw new Error("Missing frontmatter");
  const [, block, body] = match as [string, string, string];
  return { block, body };
}

import math

def newton_sqrt(n: float, iterations: int = 10) -> float:
    x = n
    for _ in range(iterations):
        x = (x + n / x) / 2
    return x

---

Blockquote

Mathematics is not about numbers, equations, computations, or algorithms: it is about understanding.

• William Paul Thurston

---

Inline math

Einstein's mass-energy equivalence: $E = mc^2$.

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

Euler's formula: $e^{i\theta} = \cos\theta + i\sin\theta$.

The Gaussian integral: $\int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi}$.

---

Display math

The fundamental theorem of calculus:

$$\int_a^b f'(x)\,dx = f(b) - f(a)$$

Maxwell's equations in differential form:

$$\nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_0}$$$$\nabla \times \mathbf{B} = \mu_0 \mathbf{J} + \mu_0\varepsilon_0\frac{\partial \mathbf{E}}{\partial t}$$

The Schrödinger equation:

$$i\hbar\frac{\partial}{\partial t}\Psi(\mathbf{r},t) = \hat{H}\Psi(\mathbf{r},t)$$

A matrix:

$$A = \begin{pmatrix} a_{11} & a_{12} \\ a_{21} & a_{22} \end{pmatrix}$$

The definition of a limit:

$$\lim_{x \to c} f(x) = L \iff \forall\,\varepsilon > 0,\;\exists\,\delta > 0 : 0 < |x - c| < \delta \implies |f(x) - L| < \varepsilon$$

A sum:

$$\sum_{n=0}^{\infty} \frac{x^n}{n!} = e^x$$

---

Math inline with text

If $f$ is differentiable on $(a, b)$ and continuous on $[a, b]$, then there exists $c \in (a, b)$ such that $f'(c) = \dfrac{f(b) - f(a)}{b - a}$. This is the mean value theorem.

The Fourier transform of a function $f \in L^1(\mathbb{R})$ is defined by $\hat{f}(\xi) = \int_{-\infty}^{\infty} f(x)\,e^{-2\pi i x \xi}\,dx$, and it maps convolution to pointwise multiplication: $\widehat{f * g} = \hat{f}\cdot\hat{g}$.

---

That's everything the renderer supports.