让 Jekyll 支持 LaTex 数学公式（MathJax v

2021-02-13 本文已影响0人 HansenZheng

前言

最近在GitHub上建站，使用了cotes2020的Jekyll网页模版。模版很好用😄，但是美中不足的是不支持LaTex数学公式。因为最近几篇博客里使用了LaTex，于是开始DIY。

Google了许多解决方案，发现基本都是使用MathJax v2版本。虽然也能使用，但是不折腾毋宁死的我就是想用最新的MathJax v3。于是一段冒险之旅开始了。

LaTex公式

用LaTex写过数学公式的同学都知道，行内公式用 $ 一些公式 $ ，公式块用$$包围。
比如公式：

$ax^2 + bx + c = 0$

公式块的代码就是

$$
ax^2 + bx + c = 0
$$

MathJax v3

MathJax是一个JS的数学公式实现，支持LaTex语法。我们一般在HTML里引用就可以在页面里添加公式支持啦。这里我们只使用最新MathJax v3。
只需要在HTML的<head>标签里加入：

<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>

polyfill看了一下，是用来对老浏览器做支持的。如果不需要，也可以不引入。

行内公式配置

将脚本嵌入之后，默认的行内标签是$ 一个公式 $，这并不符合使用LaTex的习惯，所以需要做一下配置，让其支持$符号。参照MathJax的配置文档，我们在html文件里加入：¹

<script> 
MathJax = {
  tex: {
    inlineMath: [['$', '$']],
    processEscapes: true
  }
};
</script>

这里MathJax = {}是MathJax v3的配置对象

inlineMath参数可以配置行内公式块的分隔符（delimiters），这里我们配置成美元符号$。这样就更符合我们的使用习惯啦。
processEscapes参数配置我们在页面里是否需要转义，一般我们会设置为true，这样在页面里我们就可以使用\$来正常打印美元标志，而不会被识别成分隔符。
MathJax还支持更多配置，具体可以参考文档。

集成到 Jekyll

接下来我们把MathJax集成到Jekyll模版引擎。
首先需要确认Jekyll的默认markdown解析器为kramdown。去_config.yaml里看看吧。
然后，我们有几种方案：²

直接嵌入到博客markdown文件的开头里。这样只能让单篇文章支持公式。
嵌入到<head>中，让全站支持公式。添加到Jekyll目录下的_layouts/head.html文件里就可以了，一般模版都会有这个文件。
嵌入到post.html，仅让post页面支持公式。只需要把公式块添加到_layouts/post.html文件中。一般模版也会有这个文件。

因为我想把影响控制到最小，所以使用了第三个方案。最终我把代码块添加到了post.html的文件末尾。

配好以后，所有引用post这个layout的md文件都可以支持公式了，很开心。

随心所欲地在博客里写公式吧！

欢迎来我的博客hansenz42.github.io看看！

参考文献

1.Mathjax inline mode not rendering - TeX - LaTeX Stack Exchange

2.一个GitHub大神对将MathJax集成到Jekyll的建议，注意是MathJax v2 https://github.com/github/pages-gem/issues/307#issuecomment-289536076