This is a fucking pain…

I wanted some markdown that contained LaTeX in my WordPress.com blog.

You need Jetpack’s Math & $latex … $ blocks to show LaTeX in Markdown inside the Gutenberg editor, not your regular $$ blocks.

That’s not too hard to replace, but a fucking pain.

But that just gives shitty images for the LaTeX.

Next Google^[1] suggested Mathjax custom HTML blocks but that gets blocked on cheapass WordPress.com plans.

However cause I’m on the Personal plan I can install plugins.

So first tried a Mathjax plugin, but Mathjax includeds weird shit. It gives a ton of useless info when you click on the LaTeX, rather than just being regular text.

So again with Google^[1:1], simplified it down to header/footer script plugin.

Header (taken from https://katex.org/docs/browser):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.19.1/dist/katex.min.css" integrity="sha384-WwGtaC6ywCHxA5cstpj/3+xIZvTez8dq2IcBQaXRkenHZ7FVVq1ZROtURwfbtTlG" crossorigin="anonymous">

<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.19.1/dist/katex.min.js" integrity="sha384-a1WQdjRj162i159OYq041X6I4K8NenkrI09LlPmiHg0YOb7CR+wJOraXwK9abpnE" crossorigin="anonymous"></script>

<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.19.1/dist/contrib/auto-render.min.js" integrity="sha384-bjyGPfbij8/NDKJhSGZNP/khQVgtHUE5exjm4Ydllo42FwIgYsdLO2lXGmRBf5Mz" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>

Footer:

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

That worked magically. Here’s the post I wanted it for:

Amdahl’s Law (but simpler)