使用 Markdown + MathJax 在博客里插入数学公式
在书写数值计算类文章,特别是机器学习相关算法时,难免需要插入复杂的数学公式。一种是用图片在网页上展示,另外一种是使用 MathJax 来展示复杂的数学公式。它直接使用 Javascript 使用矢量字库或 SVG 文件来显示数学公式。优点是效果好,比如在 Retina 屏幕上也不会变得模糊。并且可以直接把公式写在 Markdown 文章里。本文介绍使用 MathJax 在 Markdown 文件里直接插入数学公式。并且附带一个简单的书写数学公式的 LaTex 教程。
工具¶
配置 Markdown Preview 来支持 MathJax¶
使用 Sublime + Markdown Preview 插件来写博客时。需要开启 Markdown Preview 对 MathJax 的支持,这样在预览界面才能正确地显示数学公式。方法是打开在 Markdown Preview 的用户配置文件 (Package Settings -> Markdown Preview -> Setting) 里添加如下内容:
"enable_mathjax": true,
"js": [
"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js",
"res://MarkdownPreview/js/math_config.js",
]
接着,需要安装 PackageResourceViewer,打开 Markdown Preview 包里的 math_config.js
文件,修改为如下内容:
MathJax.Hub.Config({
config: ["MMLorHTML.js"],
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS", "output/NativeMML"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true
},
TeX: {
extensions: ["AMSmath.js", "AMSsymbols.js"],
TagSide: "right",
TagIndent: ".8em",
MultLineWidth: "85%",
equationNumbers: {
autoNumber: "AMS",
},
unicode: {
fonts: "STIXGeneral,'Arial Unicode MS'"
}
},
displayAlign: "center",
showProcessingMessages: false,
messageStyle: 'none'
});
只要打开 Option + P
就可以打开预览。
配置 Pelican 主题模板来支持 MathJax¶
我使用的主题是 foundation-default-colours
,它默认是支持 MathJax 的。我们可以在模板 base.html
找到如下内容:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js"></script>
<script>
MathJax.Hub.Config({
config: ["MMLorHTML.js"],
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS", "output/NativeMML"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true
},
TeX: {
extensions: ["AMSmath.js", "AMSsymbols.js"],
TagSide: "right",
TagIndent: ".8em",
MultLineWidth: "85%",
equationNumbers: {
autoNumber: "AMS",
},
unicode: {
fonts: "STIXGeneral,'Arial Unicode MS'"
}
},
displayAlign: "center",
showProcessingMessages: false,
messageStyle: 'none'
});
</script>
如果模板不支持,也可以直接添加上面的脚本来支持 MathJax。
在本地部署 MathJax¶
上述配置上,使用的是 cdnjs.cloudflare.com
CDN 服务器上的 MathJax。有时候,这个 CDN 在国内可能访问不稳定,此时,你可能想在自己的服务器上部署 MathJax。这是可行的,只是要注意,MathJax 的字库文件将近 130MB,还是比较大的。本地部署 MathJax 的步骤如下:
- 阅读官方文档,这是最权威的信息。
- 下载合适的 MathJax 版本,然后解压。截止本文写作时,我使用的是 MathJax 2.7.0 的版本。下载后,拷贝到服务器上解压。如解压到
/home/ubuntu/MathJax
目录下。确保以下文件存在/home/ubuntu/MathJax/MathJax.js
。 - 配置 nginx 服务器,指向 MathJax 目录。比如,增加如下的配置:
location /MathJax/ {
alias /home/ubuntu/MathJax/;
}
- 修改 Perlican 里
base.html
的 MathJax URL 地址。改为:
<script type="text/javascript" src="/MathJax/MathJax.js" async></script>
- 重启 nginx 服务器:
sudo service nginx restart
,然后在浏览器里确保能访问http://kamidox.com/MathJax/package.json
,说明配置成功了。
LaTex 简明教程¶
例子¶
先来看个例子:
$$
J(\theta) = \frac 1 2 \sum_{i=1}^m (h_\theta(x^{(i)})-y^{(i)})^2
$$
上面用 LaTex 格式书写的数学公式经过 MathJax 展示后效果如下:
$$ J(\theta) = \frac 1 2 \sum_{i=1}^m (h_\theta(x^{(i)})-y^{(i)})^2 $$
这个公式是线性回归算法里的成本函数。
规则¶
关于在 Markdown 书写 LaTex 数学公式有几个规则常用规则需要记住:
行内公式
行内公式使用 $
号作为公式的左右边界,如 $h(x) = \theta_0 + \theta_1 x$ 公式的 LaTex 内容如下
$h(x) = \theta_0 + \theta_1 x$
行间公式
公式需要独立显示一行时,使用 $$
来作为公式的左右边界,如
$$ \theta_i = \theta_i - \alpha\frac\partial{\partial\theta_i}J(\theta) $$
的 LaTex 代码为:
$$
\theta_i = \theta_i - \alpha\frac\partial{\partial\theta_i}J(\theta)
$$
常用 LaTex 代码 需要记住的几个常用的符号,这样书写起来会快一点
编码 | 说明 | 示例 |
---|---|---|
\frac | 分子分母之间的横线 | $\frac1x$ |
_ | 用下划线来表示下标 | $x_i$ |
^ | 次方运算符来表示上标 | $x^i$ |
\sum | 累加器,上下标用上面介绍的编码来书写 | $\sum$ |
\alpha | 希腊字母 alpha | $y := \alpha x$ |
记住这几个就差不多了,倒回去看一下线性回归算法的成本函数的公式及其 LaTex 代码,对着练习个10分钟基本就可以掌握常用公式的写法了。要特别注意公式里空格和 {}
的运用规则。基本原则是,空格可加可不加,但如果会引起歧义,最好加上空格。{}
是用来组成群组的。比如写一个分式时,分母是一个复杂公式时,可以用 {}
包含起来,这样整个复杂公式都会变成分母了。
几个非常有用的资源¶
- 这是一篇质量很高的介绍 MathJax 的中文博客文章,需要注意的是如果是用 markdown 编写 MathJax 公式,当公式里需要两个斜杠 \ 时要写四个斜杠 \。因为 \ 会被 markdown 转义一次。
- Github 上有个在线 Markdown MathJax 编辑器,可以在这里练习,平时写公式时也可以在这里先写好再拷贝到文章里
- 这是 LaTex 完整教程,包含完整的 LaTex 数学公式的内容,包括更高级的格式控制等
- 这是一份PDF 格式的 MathJax 支持的数学符号表,当需要书写复杂数学公式时,一些非常特殊的符号的转义字符可以从这里查到
好啦,这样差不多就可以写出优美的数学公式啦。