Using Mathematical Formulas in Ghost: Adding LaTeX Support with KaTeX

When running a technical blog on Ghost, you’ll often need to express algorithm complexity or mathematical formulas. While Ghost doesn’t support math equations out of the box, you can easily solve this by adding KaTeX.

What is KaTeX?

KaTeX is a fast and lightweight math rendering library. It’s much faster than MathJax and uses standard LaTeX syntax, making it convenient to use.

Setup Instructions

Navigate to Settings → Code Injection in your Ghost admin dashboard.

1. Add to Site Header

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>

2. Add to Site Footer

<script>
document.addEventListener("DOMContentLoaded", function() {
    renderMathInElement(document.body, {
        delimiters: [
            {left: "$$", right: "$$", display: true},
            {left: "$", right: "$", display: false}
        ]
    });
});
</script>

How to Use

Once configured, you can start using formulas immediately.

Inline Formulas

To insert formulas within text, wrap them with $ symbols:

The time complexity of this algorithm is $O(n \log n)$.

Block Formulas

To display formulas on a separate line, wrap them with $$:

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

Examples

Algorithm Analysis:

• Linear Search: $O(n)$
• Binary Search: $O(\log n)$
• Quick Sort: $O(n \log n)$

Mathematical Formula: $e^{i\pi} + 1 = 0$

The $ collision, and how to avoid it

The single biggest gotcha with the $…$ delimiter is that KaTeX will try to render any dollar-sign pair as math. Write “it costs $5 to $10” in a post and auto-render grabs everything between the two dollar signs and turns it into garbage. Two defenses:

• Escape literal dollars as \$ so auto-render skips them.
• Tell auto-render to ignore code, so $ inside code blocks isn’t touched. Pass extra options in the footer script:

renderMathInElement(document.body, {
    delimiters: [
        {left: "$$", right: "$$", display: true},
        {left: "$", right: "$", display: false}
    ],
    ignoredTags: ["script", "noscript", "style", "textarea", "pre", "code"],
    throwOnError: false   // show an invalid formula as red error text instead of throwing
});

A note on client-side rendering

This Code Injection approach renders math in the browser, after the page loads — which means a flash of raw $O(n)$ before KaTeX runs, and a hard dependency on the CDN. It’s the right call for Ghost, where you can’t touch the build. If you control the build (a static-site generator, for instance), rendering KaTeX at build time with remark-math + rehype-katex produces zero-JS, pre-rendered math with none of these trade-offs.

Other notes

• Works in both HTML cards and Markdown cards.
• Pin the KaTeX version in the CDN URL (as above) so an upstream release can’t silently change your rendering.
• For complex formulas, check the KaTeX documentation for supported functions.