A summary of how I added simple mathjax support to Hugo. After this, you can render maths easily by including it between code ticks '$<maths>$', e.g.:

Hi $z = x + y$.

$$a^2 + b^2 = c^2$$

$$\begin{vmatrix}a & b\\ c & d \end{vmatrix}=ad-bc$$

Tools

From this forum post, I found a great article by Yihui “The Best Way to Support LaTeX Math in Markdown with MathJax”. It includes the following JavaScript solution that can be loaded using the script below:

// Not needed and only copied for future reference (in case the website is down)
(function() {
  var i, text, code, codes = document.getElementsByTagName('code');
  for (i = 0; i < codes.length;) {
    code = codes[i];
    if (code.parentNode.tagName !== 'PRE' && code.childElementCount === 0) {
      text = code.textContent;
      if (/^\$[^$]/.test(text) && /[^$]\$$/.test(text)) {
        text = text.replace(/^\$/, '\\(').replace(/\$$/, '\\)');
        code.textContent = text;
      }
      if (/^\\\((.|\s)+\\\)$/.test(text) || /^\\\[(.|\s)+\\\]$/.test(text) ||
          /^\$(.|\s)+\$$/.test(text) ||
          /^\\begin\{([^}]+)\}(.|\s)+\\end\{[^}]+\}$/.test(text)) {
        code.outerHTML = code.innerHTML;  // remove <code></code>
        continue;
      }
    }
    i++;
  }
})();

// Script to be included in your Hugo website
<script src="//yihui.org/js/math-code.js" defer></script>
<!-- Just one possible MathJax CDN below. You may use others. -->
<script defer
  src="//mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

Changes to website

First, I created a new file in layouts/partials/mathjax_support.html and copied the script into it:

// file: mathjax_support.html
<script src="//yihui.org/js/math-code.js" defer></script>
<!-- Just one possible MathJax CDN below. You may use others. -->
<script defer
  src="//mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

Second, I created a new file in layouts/partials/extend_head.html and copied this code into it (from here: “Render LaTeX math expressions in Hugo with MathJax 3. This lets you choose whether to render mathjax using math: true on individual pages. The extend_head.html file is called whenever the page is built an included between <head></head>.

{{ if .Params.math }}
{{ partial "mathjax_support.html" . }}
{{ end }}

Test typesetting

In markdown, I type this and see the output below

Hi `$z = x + y$`.

`$$a^2 + b^2 = c^2$$`

`$$\begin{vmatrix}a & b\\
c & d
\end{vmatrix}=ad-bc$$`

Output below:

Hi $z = x + y$.

$$a^2 + b^2 = c^2$$

$$\begin{vmatrix}a & b\\ c & d \end{vmatrix}=ad-bc$$

Noob notes for math typesetting

Simple algorithm typesetting

Quick hack for algorithmic package-like typesetting in $\LaTeX$:

> Algorithm parameters: step size  `$\alpha \in (0 , 1] , \epsilon > 0$`   
Initialize  `$Q  ( s, a ), \  \forall s \in S^+ , a \in A ( s ),$` arbitrarily except that `$Q ( terminal , \cdot ) = 0$`    
>
> Loop for each episode:  
`$\quad$`Initialize `$S$`   
`$\quad$`Loop  for  each  step  of  episode:    
`$\qquad$`Choose  `$A$` from `$S$` using some policy derived from `$Q$` (eg `$\epsilon$`-greedy)   
`$\qquad$`Take action `$A$`, observe `$R, S'$`   
`$\qquad Q(S,A) \leftarrow Q(S,A) + \alpha[R+\gamma \max_a(S', a) - Q(S, A)]$`   
`$\qquad S \leftarrow S'$`    
`$\quad$` until `$S$` is terminal

Renders as:

Algorithm parameters: step size $\alpha \in (0 , 1] , \epsilon > 0$
Initialize $Q ( s, a ), \ \forall s \in S^+ , a \in A ( s ),$ arbitrarily except that $Q ( terminal , \cdot ) = 0$

Loop for each episode:
$\quad$Initialize $S$
$\quad$Loop for each step of episode:
$\qquad$Choose $A$ from $S$ using some policy derived from $Q$ (eg $\epsilon$-greedy)
$\qquad$Take action $A$, observe $R, S'$
$\qquad Q(S,A) \leftarrow Q(S,A) + \alpha[R+\gamma \max_a(S', a) - Q(S, A)]$
$\qquad S \leftarrow S'$
$\quad$ until $S$ is terminal