Katex in blogger

If you write about math, physics, or code on Blogger, plain text falls short fast. You want real equations—integrals, fractions, matrices—not screenshots of LaTeX.

KaTeX is a fast math typesetting library that runs in the browser. You load it from a CDN, write math in LaTeX-like syntax, and it renders cleanly on the page. No heavy setup, no image exports, no external equation editors.

This guide shows a setup that works on Blogger (including custom domains). You’ll add a small HTML block once per post (or once in your theme), then write math with familiar delimiters.

Demo (this page loads KaTeX):

\[ f(x) = \int_{-\infty}^{\infty} e^{2\pi i \xi x}\, d\xi \]

Inline: \( e^{i\pi} + 1 = 0 \).

What you’ll need

• A Blogger post opened in HTML view (not Compose / rich text)
• Willingness to paste a small loader block at the top of the post
• Optional: the same block in your theme if you want math on every page

How KaTeX works on Blogger (in one minute)

1. Load the KaTeX CSS (fonts and styling)
2. Load the KaTeX JavaScript
3. Load the auto-render extension so math delimiters become equations
4. Write math using \( ... \) (inline) or \[ ... \] (display)

Blogger serves your HTML; the visitor’s browser runs KaTeX after the page loads.

Step 1 — Switch the post to HTML view

In the Blogger editor:

1. Open your post
2. Choose HTML view (not Compose)
3. Paste the loader block near the top of the post body

If you stay in Compose, Blogger may strip <script> tags, eat backslashes, or break equations when you re-open the post.

Step 2 — Paste the KaTeX loader

Paste this block once at the top of the post (HTML view). It uses KaTeX 0.18.1 from jsDelivr with Subresource Integrity hashes:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.18.1/dist/katex.min.css" integrity="sha384-1vdNCNel6Tx/NQa8IR1mGOGKsbGreCkOPfbtPPnUURJ5Tu2PRVfQ/7KLZC+Pi1p1" crossorigin="anonymous">

<script defer src="https://cdn.jsdelivr.net/npm/katex@0.18.1/dist/katex.min.js" integrity="sha384-ycJ6GAwiS15LoUPipwJOrWTvkUHl/YqELValBwI5I4awP1EeEQJYarj+w85ntcz7" crossorigin="anonymous"></script>

<script defer src="https://cdn.jsdelivr.net/npm/katex@0.18.1/dist/contrib/auto-render.min.js" integrity="sha384-bjyGPfbij8/NDKJhSGZNP/khQVgtHUE5exjm4Ydllo42FwIgYsdLO2lXGmRBf5Mz" crossorigin="anonymous"
  onload="renderMathInElement(document.body);"></script>

Notes:

• If you upgrade KaTeX later, copy a fresh snippet from the KaTeX browser docs so version and hashes stay in sync.
• defer loads scripts without blocking the page as much as synchronous scripts.
• Use a normal <link> tag (no </link>).
• Default auto-render understands \( \) and \[ \], which is enough for most posts.

Step 3 — Write math in the post

Display math (centered block)

<p>
\[
f(x) = \int_{-\infty}^{\infty} e^{2\pi i \xi x}\, d\xi
\]
</p>

Rendered:

\[ f(x) = \int_{-\infty}^{\infty} e^{2\pi i \xi x}\, d\xi \]

Inline math (inside a sentence)

<p>
The Gaussian integral \( \int_{-\infty}^{\infty} e^{-x^2}\, dx = \sqrt{\pi} \) shows up everywhere.
</p>

Rendered: The Gaussian integral \( \int_{-\infty}^{\infty} e^{-x^2}\, dx = \sqrt{\pi} \) shows up everywhere.

More useful examples

Quadratic formula

\[
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
\]

\[ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \]

Matrix

\[
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
\]

\[ \begin{pmatrix} a & b \\ c & d \end{pmatrix} \]

Derivative

\[
\frac{d}{dx}\sin x = \cos x
\]

\[ \frac{d}{dx}\sin x = \cos x \]

Tip: put display equations in their own <p> so Blogger’s layout doesn’t glue them to neighboring text oddly.

Step 4 — Preview on the live theme

1. Preview the post (or publish as draft and open the public URL)
2. Confirm equations render (not raw \[ ... \])
3. Check once on mobile—KaTeX usually scales fine

Compose view will not show real KaTeX output. Always verify in Preview or on the live URL.

Optional — Load KaTeX site-wide (theme)

If many posts need math, put the same <link> + two <script> tags in the theme once:

1. Blogger → Theme → Edit HTML
2. Paste the loader before </head> (or just before </body>)
3. Save

Then individual posts only need the math markup, not the CDN block every time.

Tradeoff: every page loads KaTeX (a bit of extra weight). For a mostly non-math blog, per-post loaders are lighter.

Blogger gotchas (if something fails)

• Equations show as raw \[...\] — scripts stripped or not running. Stay in HTML view; confirm the scripts are still in the post source; try placing the loader in the theme.
• Scripts disappear after save — the post was re-saved in Compose. Re-paste in HTML view and avoid switching back to Compose.
• Backslashes vanish (frac instead of \frac) — rich text editor. Stay in HTML view.
• Works in one place but not another — hard refresh or try an incognito window.
• One bad equation looks wrong — fix the LaTeX; auto-render usually continues with the rest.

Some themes are picky about third-party scripts. jsDelivr + KaTeX is widely used; if post-level scripts are blocked, theme HTML is often more reliable.

KaTeX vs screenshots vs MathJax

• KaTeX — Fast, sharp, copy-paste LaTeX. Needs JavaScript and a little care in Blogger’s HTML editor.
• Screenshots — Simple, but ugly on mobile, hard to edit, and weak for accessibility.
• MathJax — Very complete LaTeX support, but often heavier/slower than KaTeX for a typical blog.

For a Blogger math or physics notebook, KaTeX is usually the sweet spot.

Minimal test post

If you only want to verify the setup, a draft with this is enough:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.18.1/dist/katex.min.css" integrity="sha384-1vdNCNel6Tx/NQa8IR1mGOGKsbGreCkOPfbtPPnUURJ5Tu2PRVfQ/7KLZC+Pi1p1" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.18.1/dist/katex.min.js" integrity="sha384-ycJ6GAwiS15LoUPipwJOrWTvkUHl/YqELValBwI5I4awP1EeEQJYarj+w85ntcz7" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.18.1/dist/contrib/auto-render.min.js" integrity="sha384-bjyGPfbij8/NDKJhSGZNP/khQVgtHUE5exjm4Ydllo42FwIgYsdLO2lXGmRBf5Mz" crossorigin="anonymous"
  onload="renderMathInElement(document.body);"></script>

<p>Inline: \( e^{i\pi} + 1 = 0 \).</p>

<p>
\[
f(x) = \int_{-\infty}^{\infty} e^{2\pi i \xi x}\, d\xi
\]
</p>

If those two equations render, you’re good—then write the real article around the same loader.

Related reading on this blog

• Installing wxMaxima on macOS and fixing plotdf() / wish crashes
• How to set up LaTeX (BasicTeX) with Visual Studio Code on macOS

Writing math in posts pairs well with doing the math in Maxima or LaTeX offline—then publishing clean equations here with KaTeX.

Changelog

• Written for Blogger + KaTeX 0.18.1 via jsDelivr
• Update the version and SRI hashes when you bump KaTeX