Hugo+KaTex:在Markdown中嵌入数学公式

Sat 30 June 2018 / In categories tools

hugo, katex, markdown

目前你访问的网站是用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。

(完)

Load Disqus Comments