目前你访问的网站是用Hugo生成的。Hugo可以让你使用markdown来书写内容。有时我们需要书写数学公式，那如何在markdown中做到呢？本文做了一点小尝试，使用KaTex来在markdown中插入数学公式。

MathJax还是KaTeX

在网页上渲染数学公式的引擎，首当其中的就是MathJax，成熟稳定，功能强大。其次KaTex也不错，一开始是为Khan Academy开发，虽然功能没有MathJax强大，但特点是轻快灵活。

在KaTeX and MathJax Comparison Demo这个页面，可以对比两个渲染引擎的性能和输出。一次对比的结果如下：

  • Time to process page = 300 ms 【KaTeX】
  • Time to process page = 2678 ms 【MathJax】

可以看到KaTeX比MathJax快了一个数量级。

鉴于本网站并不包含复杂的数学公式，不需要大而全的功能，所以果断选择KaTex。

Hugo+KaTeX

那如何在Hugo中支持KaTex呢？这篇文章a great toolset for static blogging给了不少启发。

选用支持KaTex的Hugo主题

首先要确认你所使用的的Hugo主题是否支持KaTeX。简单的说KaTeX是一个JavaScript库，所以要在Hugo主题的模板中将相应的JavaScript库包含进来。打开就是以下这样子：

<!-- top of page -->
{{ if .Params.math }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm" crossorigin="anonymous"></script>
{{ end }}


<!-- bottom of page -->
{{ if .Params.math }}
  <script>renderMathInElement(document.body);</script>
{{ end }}

以上KaTex是由一个选项开关.Params.math控制，需要在config.toml里面打开这个选项开关：

[Params]
  math = true

不同的主题，选项开关可能会有不同

挑选合适的Markdown引擎

Hugo带有两个markdown引擎：

Hugo默认使用blackfriday，如果要使用mmark，有两种办法：

  • 在frontmatter指定markup = "mmark"
  • 把文件的后缀名从*.md改为*.mmark

这两个引擎在功能上是不完全一样的，特别是在转义字符的支持上，mmark会更友好一点。

KaTex的demo

以爱因斯坦的著名公式做一个demo

\[ E = MC^2 \]

上面公式的源代码是：

$$ E = MC^2 $$

小结

KaTeX是一个小巧轻快的JavaScript库，可以帮助你快速在网页版渲染数学公式。

但不得不说，KaTeX有一个小缺点，如果文章是以RSS形式输出的，那它就没法用了，因为RSS不支持JavaScript。

（完）

2019-11-09更新