Typesetting the Cosmos: Bringing Beautiful Math to the Blog

I've been spending time lately thinking about the fundamental structures of spacetime. There is a profound elegance in the mathematical notation used in this area of physics and mathematics. Physics is a language, and when you are expressing the laws of the universe, the typography should honor the weight of the concepts. Right?! Right.

Historically, bringing complex math notation to the Internet meant compromises. You either had to embed static, inaccessible images, or you had to inject megabytes of third-party JavaScript (like the traditional MathJax CDN) into your users' browsers, violating strict privacy architectures and causing layout shifts as the math rendered on the client side.

I wanted beautiful math, but I didn't want to compromise the privacy-first, zero-client-JS architecture of this 11ty site.

The Infrastructure Battle

Getting this to work natively at build-time (when the content is built on the server) required a slight pivot. Initially, I attempted to use a MathJax HTML-transform plugin, but spinning up that heavy engine across a 20-year, 1,200+ post blog archive proved entirely too resource-intensive for this setup.

The solution was pivoting to KaTeX (@iktakahiro/markdown-it-katex), a wildly fast typesetting engine originally built by Khan Academy. Instead of parsing the final HTML, I hooked KaTeX directly into the Eleventy Markdown parser. Now, when the site builds, the parser instantly converts LaTeX blocks into perfectly structured HTML nodes.

To keep things strictly privacy-preserving, I self-host the KaTeX CSS and web fonts directly from the node_modules directory via a passthrough copy. After layering on a bit of CSS armor to protect the math from Tailwind's aggressive global typographic resets, the result is crisp, scalable, and instantaneous.

Exercising the Engine

Now that the engine is purring, I can finally write about serious physics.

We can easily render inline variables—like discussing how the metric tensor $g_{\mu\nu}$ defines the causal structure of a manifold. But the real magic happens in the block-level equations.

Consider the Einstein-Hilbert Action, which yields the vacuum Einstein field equations when varied with respect to the metric. It is one of the most beautiful equations in General Relativity:

$$S = \int \left[ \frac{1}{2\kappa} (R - 2\Lambda) + \mathcal{L}_M \right] \sqrt{-g} \, d^4x$$

When we push deeper into quantum territory, such as Loop Quantum Gravity (LQG), we rely heavily on the Ashtekar variables. The holonomy $h_e[A]$ of the connection $A$ along an edge $e$ is foundational to building spin networks:

$$h_e[A] = \mathcal{P} \exp \left( - \int_e A_a dx^a \right)$$

And if we want to look at the Bekenstein-Hawking formula for Black Hole Entropy—the brilliant intersection of thermodynamics, quantum mechanics, and gravity—the typography handles the fractions and subscripts flawlessly:

$$S_{BH} = \frac{k_B A}{4 \ell_P^2}$$

No JavaScript. No tracking CDNs. Just pure, self-hosted mathematics, rendered beautifully across every device.