$\text{MathJax}$ performs client-side rendering via JavaScript after page load, which is slower but more powerful in functionality.
Configuration
To enable $\text{MathJax}$ support in the FixIt theme, you need to configure it in the theme’s configuration file hugo.toml.
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
| [markup]
[markup.goldmark]
[markup.goldmark.extensions]
[markup.goldmark.extensions.passthrough]
enable = true
[markup.goldmark.extensions.passthrough.delimiters]
block = [
[
'\[',
'\]'
],
[
'$$',
'$$'
]
]
inline = [
[
'\(',
'\)'
],
[
'$',
'$'
]
]
[params]
[params.page]
[params.math]
enable = true
type = "mathjax"
# MathJax server-side rendering (https://www.mathjax.org)
# MathJax config: https://docs.mathjax.org/en/latest/options/index.html
[params.math.mathjax]
cdn = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
[params.math.mathjax.packages]
# '[+]' = ['configmacros']
# custom macros map
# syntax: <macro> = <definition>
[params.math.mathjax.macros]
# "bold" = ["{\\bf #1}", 1] # usage: $\bold{math}$
[params.math.mathjax.loader]
load = [ 'ui/safe' ]
[params.math.mathjax.loader.paths]
# custom = "https://cdn.jsdelivr.net/gh/sonoisa/XyJax-v3@3.0.1/build/"
# more loader config e.g source, dependencies, provides etc.
[params.math.mathjax.options]
enable_menu = true
# HTML tags that won't be searched for math
skip_html_tags = [
"script",
"noscript",
"style",
"textarea",
"pre",
"code",
"math",
"select",
"option",
"mjx-container"
]
# class that marks tags not to search
ignore_html_class = "mathjax_ignore"
# HTML tags that can appear within math
[params.math.mathjax.options.include_html_tags]
# "#comment" = ""
# br = "\n"
# wbr = ""
|
The default inline formula delimiters are:
For example:
1
| $c = \pm\sqrt{a^2 + b^2}$ and \(f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi\)
|
The rendered output is as follows:
$c = \pm\sqrt{a^2 + b^2}$ and $f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi$
The default formula block delimiters are:
For example:
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
33
34
| Quadratic formula:
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
Cauchy integral formula:
\[ f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz \]
Cosine angle addition formula:
$$
\cos(\theta+\phi)=\cos(\theta)\cos(\phi)−\sin(\theta)\sin(\phi)
$$
Gauss divergence theorem:
\[
\int_D ({\nabla\cdot} F)dV=\int_{\partial D} F\cdot ndS
\]
Curl of a vector field:
$$
\vec{\nabla} \times \vec{F} =
\left( \frac{\partial F_z}{\partial y} - \frac{\partial F_y}{\partial z} \right) \mathbf{i}
+ \left( \frac{\partial F_x}{\partial z} - \frac{\partial F_z}{\partial x} \right) \mathbf{j}
+ \left( \frac{\partial F_y}{\partial x} - \frac{\partial F_x}{\partial y} \right) \mathbf{k}
$$
Standard deviation:
$$
\sigma = \sqrt{ \frac{1}{N} \sum_{i=1}^N (x_i -\mu)^2}
$$
Definition of Christoffel symbols:
$$
(\nabla_X Y)^k = X^i (\nabla_i Y)^k =
X^i \left( \frac{\partial Y^k}{\partial x^i} + \Gamma_{im}^k Y^m \right)
$$
|
The rendered output is as follows:
Quadratic formula:
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
Cauchy integral formula:
$$ f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz $$
Cosine angle addition formula:
$$
\cos(\theta+\phi)=\cos(\theta)\cos(\phi)−\sin(\theta)\sin(\phi)
$$
Gauss divergence theorem:
$$
\int_D ({\nabla\cdot} F)dV=\int_{\partial D} F\cdot ndS
$$
Curl of a vector field:
$$
\vec{\nabla} \times \vec{F} =
\left( \frac{\partial F_z}{\partial y} - \frac{\partial F_y}{\partial z} \right) \mathbf{i}
+ \left( \frac{\partial F_x}{\partial z} - \frac{\partial F_z}{\partial x} \right) \mathbf{j}
+ \left( \frac{\partial F_y}{\partial x} - \frac{\partial F_x}{\partial y} \right) \mathbf{k}
$$
Standard deviation:
$$
\sigma = \sqrt{ \frac{1}{N} \sum_{i=1}^N (x_i -\mu)^2}
$$
Definition of Christoffel symbols:
$$
(\nabla_X Y)^k = X^i (\nabla_i Y)^k =
X^i \left( \frac{\partial Y^k}{\partial x^i} + \Gamma_{im}^k Y^m \right)
$$
Chemical Equations
Both $\text{MathJax}$ and $\KaTeX$ support chemical equations. For example:
1
| $$C_p[\ce{H2O(l)}] = \pu{75.3 J // mol K}$$
|
The rendered output is as follows:
$$C_p[\ce{H2O(l)}] = \pu{75.3 J // mol K}$$
CDN
Custom $\text{MathJax}$ CDN is supported. You can set the $\text{MathJax}$ CDN address in the theme configuration file. For example:
1
2
| [params.math.mathjax]
cdn = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
|
Custom Macros
$\text{MathJax}$ supports custom macros. You can add custom macros in the theme configuration file. For example:
1
2
3
4
5
6
| [params.math.mathjax.macros]
KaTeX = "{K\\kern-.325em\\raise.21em{\\scriptstyle{A}}\\kern-.17em\\TeX}" # usage: $\KaTeX$
bold = [
"{\\bf #1}",
1
] # usage: $\bold{math}$
|
Then use them in your article:
1
| $\bold{Custom}$ macro $\KaTeX$ in $\text{MathJax}$
|
The rendered output is as follows:
$\bold{Custom}$ macro $\KaTeX$ in $\text{MathJax}$
Custom Extensions
$\text{MathJax}$ supports custom extensions. You can add custom extensions in the theme configuration file.
For example, to add the physics and xypic extension packages:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| [params.math.mathjax.packages]
"[+]" = [
"physics",
"xypic"
]
[params.math.mathjax.loader]
load = [
"ui/safe",
"[tex]/physics",
"[custom]/xypic.js"
]
[params.math.mathjax.loader.paths]
custom = "https://cdn.jsdelivr.net/gh/sonoisa/XyJax-v3@3.0.1/build/"
[params.math.mathjax.tex]
[params.math.mathjax.tex.physics]
italicdiff = false
arrowdel = false
|
A physics package example:
1
2
3
| $$
\mqty(a & b \\ c & d) = \begin{pmatrix} a & b \\ c & d \end{pmatrix}
$$
|
The rendered output is as follows:
$$
\mqty(a & b \\ c & d) = \begin{pmatrix} a & b \\ c & d \end{pmatrix}
$$
An xypic package example:
1
2
3
4
5
6
7
8
9
| $$
\begin{xy}
\xymatrix {
U \ar@/_/[ddr]_y \ar@{.>}[dr]|{\langle x,y \rangle} \ar@/^/[drr]^x \\
& X \times_Z Y \ar[d]^q \ar[r]_p & X \ar[d]_f \\
& Y \ar[r]^g & Z
}
\end{xy}
$$
|
The rendered output is as follows:
$$
\begin{xy}
\xymatrix {
U \ar@/_/[ddr]_y \ar@{.>}[dr]|{\langle x,y \rangle} \ar@/^/[drr]^x \\
& X \times_Z Y \ar[d]^q \ar[r]_p & X \ar[d]_f \\
& Y \ar[r]^g & Z
}
\end{xy}
$$
Error Messages
If errors occur during formula rendering, $\text{MathJax}$ will display error messages on the page.
For example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| Correct syntax ($c = \pm\sqrt{a^2 + b^2}$) and incorrect syntax ($c = \pm\sqrt{a\^2 + b^2}$)
Correct syntax:
$$
\begin{CD}
A @>a>> B \\
@VbVV @AAcA \\
C @= D
\end{CD}
$$
Incorrect syntax:
$$
\begin{cd}
A @>a>> B \\
@VbVV @AAcA \\
C @= D
\end{cd}
$$
|
The rendered output is as follows:
Correct syntax $c = \pm\sqrt{a^2 + b^2}$ and incorrect syntax $c = \pm\sqrt{a\^2 + b^2}$
Correct syntax:
$$
\begin{CD}
A @>a>> B \\
@VbVV @AAcA \\
C @= D
\end{CD}
$$
Incorrect syntax:
$$
\begin{cd}
A @>a>> B \\
@VbVV @AAcA \\
C @= D
\end{cd}
$$
FixItTheme for Hugo