目录

【拓展Markdown】为hugo渲染数学公式

目录

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

/posts/mathjax_js/before.png
调整之前
/posts/mathjax_js/after.png
调整之后

这里记录一下干了什么吧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
+++

相关内容