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, static architecture of this 11ty site or make readers' browsers responsible for typesetting equations.

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, a wildly fast typesetting engine originally built by Khan Academy. A small Markdown-it adapter recognizes the site's established $...$ and $$...$$ syntax and sends the contents directly to KaTeX during the Eleventy build. Instead of parsing the final HTML, the parser converts LaTeX blocks into structured HTML nodes before the site is published.

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 client-side math rendering. No tracking CDNs. Just pure, self-hosted mathematics, rendered beautifully across every device.

UPDATE (August 8, 2026): I have updated the software that turns the equations in this article into beautifully formatted math. The site had been relying on an old version that could no longer receive current security fixes and maintenance updates.

Making that change required some care. A replacement could have mistaken ordinary dollar amounts for equations or changed how math appeared in posts from across more than twenty years of the archive. The updated system keeps those posts working as before, and automated checks will help protect them from unexpected changes in the future.

For technical readers: The original @iktakahiro/markdown-it-katex plugin bundled an obsolete KaTeX release. Replacing the plugin directly was risky because alternatives use different rules for recognizing $...$ inline math and $$...$$ display math.

The site now uses a small local Markdown-it adapter derived from the original MIT-licensed plugin. It preserves the archive's established delimiter behavior, error markup, and CSS hooks while allowing KaTeX to be upgraded independently. Focused regression tests cover inline math, multiline display equations, ordinary dollar amounts, and malformed expressions.

The maintenance lesson is that a dependency's behavior can become part of a publishing system's content contract. Upgrading safely sometimes means preserving and testing that narrow behavior locally rather than forcing years of content through a subtly different parser.