$\text{MathJax}$ 在页面加载后通过 JavaScript 进行 客户端渲染，速度较慢 但 功能更加强大。
配置
要在 FixIt 主题中启用 $\text{MathJax}$ 支持，需要在主题的配置文件 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 = ""
|
行内公式
默认的行内公式分割符有：
例如：
1
| $c = \pm\sqrt{a^2 + b^2}$ 和 \(f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi\)
|
呈现的输出效果如下：
$c = \pm\sqrt{a^2 + b^2}$ 和 $f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi$
公式块
默认的公式块分割符有：
例如：
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
| 二次公式：
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
柯西积分公式：
\[ f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz \]
余弦的角度和公式：
$$
\cos(\theta+\phi)=\cos(\theta)\cos(\phi)−\sin(\theta)\sin(\phi)
$$
高斯散度定理：
\[
\int_D ({\nabla\cdot} F)dV=\int_{\partial D} F\cdot ndS
\]
向量场的旋度：
$$
\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}
$$
标准差：
$$
\sigma = \sqrt{ \frac{1}{N} \sum_{i=1}^N (x_i -\mu)^2}
$$
Christoffel 符号的定义：
$$
(\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)
$$
|
呈现的输出效果如下：
二次公式：
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
柯西积分公式：
$$ f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz $$
余弦的角度和公式：
$$
\cos(\theta+\phi)=\cos(\theta)\cos(\phi)−\sin(\theta)\sin(\phi)
$$
高斯散度定理：
$$
\int_D ({\nabla\cdot} F)dV=\int_{\partial D} F\cdot ndS
$$
向量场的旋度：
$$
\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}
$$
标准差：
$$
\sigma = \sqrt{ \frac{1}{N} \sum_{i=1}^N (x_i -\mu)^2}
$$
Christoffel 符号的定义：
$$
(\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)
$$
化学方程式
$\text{MathJax}$ 和 $\KaTeX$ 都支持化学方程式。例如：
1
| $$C_p[\ce{H2O(l)}] = \pu{75.3 J // mol K}$$
|
呈现的输出效果如下：
$$C_p[\ce{H2O(l)}] = \pu{75.3 J // mol K}$$
CDN
支持自定义 $\text{MathJax}$ CDN。可以在主题的配置文件中设置 $\text{MathJax}$ 的 CDN 地址。例如：
1
2
| [params.math.mathjax]
cdn = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
|
自定义宏
$\text{MathJax}$ 支持自定义宏。可以在主题的配置文件中添加自定义宏。例如：
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}$
|
然后在文章中使用：
1
| $\bold{Custom}$ macro $\KaTeX$ in $\text{MathJax}$
|
呈现的输出效果如下：
$\bold{Custom}$ macro $\KaTeX$ in $\text{MathJax}$
自定义扩展
$\text{MathJax}$ 支持自定义扩展。可以在主题的配置文件中添加自定义扩展。
例如，添加 physics 和 xypic 扩展包：
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
|
一个 physics 包示例：
1
2
3
| $$
\mqty(a & b \\ c & d) = \begin{pmatrix} a & b \\ c & d \end{pmatrix}
$$
|
呈现的输出效果如下：
$$
\mqty(a & b \\ c & d) = \begin{pmatrix} a & b \\ c & d \end{pmatrix}
$$
一个 xypic 包示例：
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}
$$
|
呈现的输出效果如下：
$$
\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}
$$
错误信息
如果在渲染公式时遇到错误，$\text{MathJax}$ 会在页面上显示错误信息。
例如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| 正确写法（$c = \pm\sqrt{a^2 + b^2}$）和错误写法（$c = \pm\sqrt{a\^2 + b^2}$）
正确写法：
$$
\begin{CD}
A @>a>> B \\
@VbVV @AAcA \\
C @= D
\end{CD}
$$
错误写法：
$$
\begin{cd}
A @>a>> B \\
@VbVV @AAcA \\
C @= D
\end{cd}
$$
|
呈现的输出效果如下：
正确写法 $c = \pm\sqrt{a^2 + b^2}$ 和错误写法 $c = \pm\sqrt{a\^2 + b^2}$
正确写法：
$$
\begin{CD}
A @>a>> B \\
@VbVV @AAcA \\
C @= D
\end{CD}
$$
错误写法：
$$
\begin{cd}
A @>a>> B \\
@VbVV @AAcA \\
C @= D
\end{cd}
$$
FixItHugo 主题