Learning on the Job: Using MathJax

Learning on the Job: Using MathJax

August 18, 2022
MathJAX

As I proceed with the “Great Reconstruction” project I had to learn to use MathJAX with HUGO. This is what I’ve learned so far:

MathJAX 2.7.1 is usable #

The newer version 3 doesn’t have line breaks and 2.7.7 didn’t work well either. For the moment I’ll stick with this version.

Two very useful shortcodes #

A short code mathjax.html for loading MathJAX script:

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script>

A shortcode for starting math blocks (and labeling them):

{{ if (.Get "tag")}} <a name="{{ .Get "tag" }}"></a> {{ end }}
$$ {{ .Inner | safeHTML}} {{ if (.Get "tag")}} \tag{ {{ .Get "tag" }} } {{ end }} $$

An additional benefit of using this shortcode: math text doesn’t go through markdown processor so you don’t have to double backslashes (like in \{ or end of line `\\’).

Safari doesn’t like seconds (of arc) #

Equations that have a seconds sign ('') don’t show up in Safari. I had to define a macro like this:
$$ \def\asec{^{\prime\prime}} $$ (couldn’t use just \sec - that is the trigonometric secant function) For good measure I added also:
$$ \def\amin{^\prime} $$

Update July 2023 #

I’m using now MathJax 3 for most math work. However I still don’t know how to use the version 3 API functions so, for most “live” math, I’m using Mathjax 2. To choose which version should be loaded I’m using a front matter variable like this:

---
mathjax: 3

where the parameter chooses what MathJax version should be loaded. Behind the scenes, the themes\hugo-book\layouts\partials\docs\inject\head.html contains the following code to load the proper MathJax version:

{{ with .Params.mathjax }}
  {{ if eq . 3}}
    <script>
    window.MathJax = {
      tex: {
        inlineMath: [['$','$'], ['\\(','\\)']]
      },
      chtml: {
        displayAlign: 'left',
        displayIndent: '2em',   //extra indentataion
        mtextInheritFont: true  //make mtext elements use surrounding font
      }
    };
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-chtml.min.js"></script>
  {{ else }}
    <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]},
      displayAlign: 'left',
      displayIndent: '2em',   //extra indentataion
      "HTML-CSS": {
        mtextFontInherit: true  //make mtext elements use surrounding font
      },
      "CommonHTML": { linebreaks: { automatic: true } }
    });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script>
  {{ end }}
{{ end }}
$$ \def\asec{^{\prime\prime}} $$ $$ \def\amin{^\prime} $$

Silly tricks department #

Asymmetrical big operators #

If you want a stretchy operator only on one side pair it with a . on the other side. Example:

\left \vert \array {a \cr b \cr c} \right .

will produce:

$$ \left \vert \array {a \cr b \cr c} \right . $$

or

\left . \array {a \cr b \cr c} \right \vert

will produce:

$$ \left . \array {a \cr b \cr c} \right \vert $$