Use Mathjax on Hugo

tatsuro included in web

2022-05-24 632 words 3 minutes

Contents

Tex/LaTex allows simple construction of mathematical formulae, while looking professional when printed.

Ref. Wikibook | LaTex/Mathematics

Although I wanted to write fine math formula on this page, it was a little subtle configuration to work finely.

KaTex

I firstly tried to implement KaTex. Katex supports tidy Tex description.

Configuration

I followed a configuration in example site of Hugo LoveIt theme that embeds KaTex.

config.toml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


    [params.page.math]
      enable = true
      # default block delimiter is $$ ... $$ and \\[ ... \\]
      blockLeftDelimiter = ""
      blockRightDelimiter = ""
      # default inline delimiter is $ ... $ and \\( ... \\)
      inlineLeftDelimiter = ""
      inlineRightDelimiter = ""
      # KaTeX extension copy_tex
      copyTex = true
      # KaTeX extension mhchem
      mhchem = true

Problem

I could write by KaTex both in inline and block code.

However, KaTex on Hugo has some problem (for my page) that it could not render some block document especially in \bigin and \end block for unknown reasons.

For example, below could not be rendered.

1
2
3
4
5


\begin{CD}
   A @>a\>> B \\\\
@VbVV @AAcA \\\\
   C @= D
\end{CD}

It seems some bug related in multi-line block bug on LoveIt theme on Hugo that I’m using is fixed, I could not find right way.

MathJax

Then I found MathJax, A JavaScript display engine for mathematics.

Configuration

The instruction at Geoff Ruddock | About Blog Notebooks Icon by flaticon.com/authors/edtimRender LaTeX math expressions in Hugo with MathJax 3 was helpful.

The directory structure may depend on layout theme.

layouts/partials/plugin/mathjax_support.html (newly created)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']],
        displayMath: [['$$','$$'], ['\\[', '\\]']],
        processEscapes: true,
        processEnvironments: true
      },
      options: {
        skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre']
      }
    };
  
    window.addEventListener('load', (event) => {
        document.querySelectorAll("mjx-container").forEach(function(x){
          x.parentElement.classList += 'has-jax'})
      });
  
  </script>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script type="text/javascript" id="MathJax-script" async
    src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

layouts/partials/head/mathjax.html (newly created)

1
2
3


{{ if .Params.mathjax }}
    {{ partial "plugin/mathjax_support.html" . }}
{{ end }}

layouts/_default/baseof.html (updated)

1
2
3
4
5


<head>
...
  {{- partial "head/mathjax.html" . -}}
...        
</head>

Then add mathjax: true to the YAML frontmatter of any pages to enable MathJax.

Note

For hugo configuration, use either KaTex or mathjax. Enabling both brings duplicated rendering of math formulas 😄

Examples

Inline

1
2
3
4
5
6
7


$ c = \pm\sqrt{a^2 + b^2} $

$ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi $

$
  \rho \frac{\mathrm{D} \mathbf{v}}{\mathrm{D} t}=\nabla \cdot \mathbb{P}+\rho \mathbf{f}
$

$ c = \pm\sqrt{a^2 + b^2} $

$ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi $

$ \rho \frac{\mathrm{D} \mathbf{v}}{\mathrm{D} t}=\nabla \cdot \mathbb{P}+\rho \mathbf{f} $

Block

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


$$
  \mathbf{E}=\sum_{i} \mathbf{E}\_{i}=\mathbf{E}\_{1}+\mathbf{E}\_{2}+\mathbf{E}_{3}+\cdots
$$

$$
\begin{matrix}
a & b \\
c & d \\
\end{matrix}
$$

$$
\begin{alignat}{2}
   10&x+&3&y = 2 \\\\
   3&x+&13&y = 4
\end{alignat}
$$

$$
\begin{gather}
   a=b \\\\
   e=b+c
\end{gather}
$$

$$
\begin{CD}
   A @>a\>> B \\\\
   @VbVV @AAcA \\\\
   C @= D
\end{CD}
$$

$$ \mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots $$

$$ \begin{matrix} a & b \
c & d \
\end{matrix} $$

$$ \begin{alignat}{2} 10&x+&3&y = 2 \\
3&x+&13&y = 4 \end{alignat} $$

$$ \begin{gather} a=b \\
e=b+c \end{gather} $$

$$ \begin{CD} A @>a>> B \\
@VbVV @AAcA \\
C @= D \end{CD} $$

By chance, Github started to Support MathJax before two days

Contents

Use Mathjax on Hugo

KaTex

Configuration

Problem

MathJax

Configuration

Examples

Inline

Block

References