(How Easy? So Easy)

Wow, I had no idea. It takes like 2 minutes to add MathJax to your site, if you use their CDN.

It’s pretty much what you’d think up if you had to spit out a stupid-simple install:

  1. you add the CDN include at the bottom of your <body>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

  1. you write $$math_{jax} * stuff = anywhere$$ and it renders as:

    \[math_{jax} * stuff = anywhere\]

Inline MathJax

If you try to write it inline (like $$x+2$$ so) it shows up like \(x+2\) so, which really isn’t bad, and is probably what I’d do with pen & paper anyway. Markdown syntax highlighting does get confused by a single asterisk, though, so there might be a better way.

If I write inline in a <span>$$x+3$$</span> I get \(x+3\), so no luck there.

Dumb mistakes

I just now realize $$ .. $$ is intended to signify BLOCK MODE and $ .. $ may be intended to signify INLINE MODE.1

The docs are much more useful:

The default math delimiters are $$...$$ and \[...\] for displayed mathematics, and \(...\) for in-line mathematics. Note in particular that the $...$ in-line delimiters are not used by default. That is because dollar signs appear too often in non-mathematical settings, which could cause some text to be treated as mathematics unexpectedly.

I guess that makes sense why I couldn’t get $..$ working, either.

Let’s try: like \[block = mode\] so like [block = mode] so.

Let’s try: like \\[block = mode\\] so like \[block = mode\] so.

Let’s try: like \(block = mode\) so like (block = mode) so.

Let’s try: like \\(block = mode\\) so like \(block = mode\) so.

Finally! I have found the inline mode: \\(x + 2\\) will give me \(x + 2\) like I desired.

Downsides

Right now, there’s a weird TypeError: cannot convert null to object from tex-mml-chtml.js:1:32937 which I am not going to look into. It kind of ruins the fast-as-crap responses I’m used to, but I could maybe probably:

  • work to get back to wrapping the MathJax sources into my blog output, so they’re hosted on this domain

  • work to only put the source includes on pages that have actual math on them, if possible

  • work to put that into a JavaScript snippet, and calculate the sha256/base64 for an updated Content-Security-Policy

Or I could just bet on the cache and use the CDN. Maybe my new take will be: browsers should come with MathJax and pulling it in from a CDN in the meantime is just the polyfill we need in this world.

Alternate includes

Maybe I need to find a different, or more slimmed-down include.

MathJax says I need this:

https://polyfill.io/v3/polyfill.min.js?features=es6

Do I? Is that the best ?features= option?

It says I need:

https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js

Is that the only thing I can include? I don’t know. I know there’s a bit of lag sometimes, just live-reloading between saves.

The plot thickens

The plot added corn starch.

No, really, the MathJax Getting Started says:

Note: the configuration file tex-mml-chtml.js is a great way to test both TeX and MathML input options at once. You can find leaner combined configuration packages in our documentation.

AKA Jackpot, Baby.

Reading on, MathML is some weird (not bad! just XML/SGML whatever) input format I most certainly won’t be typing any time soon 2. So I could maybe subtract that out of my include.

To review, there are 8 configs to choose from:

tex-chtml      <-- likely a better default for me
tex-chtml-full <-- tempting..
tex-svg
tex-svg-full
tex-mml-chtml  <-- default..
tex-mml-svg
mml-chtml
mml-svg

I could probably drop down to the tex-chtml or down/up to tex-chtml-full. I’ll go down, knowing I can go to full if I want. Great!

I’m tempted to remove the polyfill include, but I don’t mind at the moment, unless it annoys me later. Right now, the tex-chtml.js resource is 766.84 KB, 167.39 KB transferred. I could drop that single file out in my ./static/ directory, and include it in every single post (but not in lists).

I could even just leave the default off (so there is no impact at all to pages that don’t use it, like true bypass), and make blog posts that use math include a <script ..></> tag themselves. I actually did that by accident, trying to demo how to include the CDN <script> tags.

If you just write a <script> tag in your Markdown, it’ll get included in the output3.

MathJax: highly recommended!

  1. https://github.com/jgm/pandoc/issues/2976 it hurts to be stupid, sometimes ↩

  2. I’d have to learn it first! ↩

  3. assuming you turned on the option to pass raw HTML in Hugo since v0.60 or whatever ↩