睡不着,水篇博客。 三周以前 Hugo released 了 0.122 版本

Release v0.122.0 · gohugoio/hugo · GitHub

推出了一个新的 goldmark(hugo使用的 markdown parser) 的插件 passthrough,用于解决数学公式中的内容被转义的问题。

Hugo 的 goldmark 并不支持数学公式,一般使用前端技术栈的 KaTeX 或者是 MathJax 实现对数学公式的渲染(在浏览器上) 然而在之前,goldmark 会对如 \ 等进行转义,导致部分数学公式无法正常渲染。

例如要通过 aligned 进行多行渲染时,换行符 \\ 将被转义为单个反斜杠 \

现在只需要配置好 passthrough 插件即可在文章的特定部分(例如数学公式)不进行 goldmark 的转义

配置 passthrough

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
markup:
  goldmark:
    extensions:
      passthrough:
        delimiters:
          block:
          - - \[
            - \]
          - - $$
            - $$
          inline:
          - - \(
            - \)
          - - $
            - $
        enable: true

Mathematics in markdown | Hugo

使用 KaTeX 进行渲染

笔者认为 KaTeX 的渲染速度要比 MathJax 更快,所以选择 KaTeX

layout/partial/extend_head.html 中加入

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{{ if or .Params.math .Site.Params.math }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
  integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js"
  integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js"
  integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous" onload="renderMathInElement(document.body, 
    {
              delimiters: [
                  {left: '$$', right: '$$', display: true},
                  {left: '\\[', right: '\\]', display: true},
                  {left: '$', right: '$', display: false},
                  {left: '\\(', right: '\\)', display: false}
              ]
          }
    );"></script>
{{ end }}