ZHENG Zi'ou

前言

Hugo本身并不支持\(\LaTeX\)，但可以通过javascript进行渲染。Hugo官网提供了多种方法，由于这篇博客我决定选择\(\KaTeX\)，而不是MathJax。

安装

在head.html的标签前加上以下语句：

<!-- KaTeX -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css" integrity="sha384-TEMocfGvRuD1rIAacqrknm5BQZ7W7uWitoih+jMNFXQIbNl16bO8OZmylH/Vi/Ei" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.js" integrity="sha384-jmxIlussZWB7qCuB+PgKG1uLjjxbVVIayPJwi6cG6Zb4YKq0JIw+OMnkkEC7kYCq" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/contrib/auto-render.min.js" integrity="sha384-IiI65aU9ZYub2MY9zhtKd1H2ps7xxf+eb2YFG9lX6uRqpXCvBTOidPRCXCrQ++Uc" crossorigin="anonymous"></script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
      renderMathInElement(document.body);
    });
</script>

不过0.9.0版本似乎很难链接，还是从这里下载js和css，并放在static/js文件夹中，并将上面代码改为：

<!-- KaTeX -->
<link rel="stylesheet" href="/js/katex/katex.min.css" >
<script src="/js/katex/katex.min.js" > </script>
<script src="/js/katex/contrib/auto-render.min.js" ></script>
 
<script>
    document.addEventListener("DOMContentLoaded", function() {
      renderMathInElement(document.body);
    });
</script>

使用

尽管KaTeX的github上是如下给出auto-render的默认值的：

[
  {left: "$$", right: "$$", display: true},
  {left: "\\[", right: "\\]", display: true},
  {left: "\\(", right: "\\)", display: false}
]

但实际上，三种标识符都成立，其中前两种将数学公式以block形式展现，第三种以inline形式展现。使用中只需要将left和right放在数学公式两侧即可。

Resource资源链接汇总

我建立的docker for Hugo开发镜像: Docker Hub上的repo、Github上的repo。
我的个人主页Hugo代码: blog-hugo
KaTeX Github、KaTeX官网、KaTeX auto-render、KaTeX contents

版本控制