效果

解决了之前一直没有解决的一个小bug——我的hugo没有办法渲染Markdown里数学公式捏qwq 现在成功从图1到图2了！

调整之前
调整之前
调整之后
调整之后

这里记录一下干了什么吧qwq

数学公式与代码高亮不同，hugo本身不支持渲染数学公式，所以我们在前端新加一个html页面去处理这个渲染问题。

MathJax官方介绍了3中引入mathjax的方法，考虑到我们的页面还需要渲染到行内公式，我们选择全局引入。

官方提供：Three Ways to Use MathJax in Node — MathJax 3.2 documentation

方法

在./layouts/partials/下新建一个mathjax.html

在./layouts/partials/extend_head.html引入：

1

{{partial "mathjax.html" .}}

在mathjax.html写入下方代码：

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

{{ if .Params.math }}
<script>
  MathJax = {
    tex: {
      inlineMath: [["$", "$"]],
    },
    displayMath: [
      ["$$", "$$"],
      ["\[\[", "\]\]"],
    ],
    svg: {
      fontCache: "global",
    },
  };
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script
  id="MathJax-script"
  async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
></script>
{{ end }}

然后在需要显示数学公式的markdown文档中添加如下参数：

1
2
3
4

+++
...
math = true
+++