利用 MathJax 在 Jekyll 网页中插入 Tex/LaTex 数学公式
MathJax 是一款基于 JavaScript 的开源数学公式显示引擎，利用它可在各种当下流行的浏览器中“完美”1渲染并显示 LaTax、MathML 以及 AsciiMath 数学公式。
但是，在 Jekyll 中使用 MathJax 时会出现严重问题，原因在于一些 LaTex 公式通常被作为 Markdown 标记处理从而影响公式的正常输出显示，因此需要一些特殊的配置。
配置并链接 MathJax 库
在<head>标签内添加如下代码：
1 <script type="text/x-mathjax-config">
2 MathJax.Hub.Config({
3 tex2jax: {
4 skipTags: ['script', 'noscript', 'style', 'textarea', 'pre']
5 }
6 });
7
8 MathJax.Hub.Queue(function() {
9 var all = MathJax.Hub.getAllJax(), i;
10 for(i=0; i < all.length; i += 1) {
11 all[i].SourceElement().parentNode.className += ' has-jax';
12 }
13 });
14 </script>
15 <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script>
数学公式都添加了has-jax类，从而可利用 CSS 对公式进行样式控制，在 style.css 文件中添加以下内容，根据需要可自行修改：
code.has-jax {font: inherit; font-size: 100%; background: inherit; border: inherit;}
这样就可以在文章中插入数学公式了，插入格式为：
段间公式：
`\[
LaTax 公式内容
\]`
行内公式：
`\( LaTax 公式内容 \)`
至于为什么要将数学公式置于反引号之内，是因为反引号用于代码控制，使输入的代码不受 Markdown 语法干扰而原样输出，这样 MathJax 即可正确渲染解析这些公式。
自动为公式编号
默认情况下公式的自动编号是关闭状态，开启它需要添加以下配置信息：
1 <script type="text/x-mathjax-config">
2 MathJax.Hub.Config({
3 TeX: { equationNumbers: { autoNumber: "AMS" } }
4 });
5 </script>
存在两种自动编号形式，一种是为 AMSmath 环境下的公式编号，即 LaTex 公式，简称 AMS 方式，另一种为所有显示的公式进行编号。上面的配置属于第一种方式，使用第二种方式的方法是将上面配置信息中的AMS替换为all。
AMS 方式也存在两种形式：带星号和不带星号，带星号的公式不产生编号而不带星号的公式产生编号，例如：
\begin{equation}
E = mc^2
\end{equation}
将产生编号，而下面的公式将不会进行编号：
\begin{equation*}
e^{\pi i} + 1 = 0
\end{equation*}
在公式内部也可使用\notag或\nonumber使当前公式停止编号，例如本文公式示例中最后一个公式即没有编号，书写代码如下：
`\[
\int_0^\infty \frac{x^3}{e^x-1}\,dx = \frac{\pi^4}{15}
\notag
\]`
使用\tag{}可自定义当前公式的编号值，而且不影响其它公式的连续自动编号。例如本文公式示例中第二个公式的编号即被修改为Eq-x，书写代码如下：
`\[
P(E) = {n \choose k} p^k (1-p)^{ n-k}
\tag{Eq-x}
\]`
使用\label和\eqref可引用公式，引用方式如下：
In equation \eqref{eq:sample}, we find the value of an
interesting integral:
\begin{equation}
\int_0^\infty \frac{x^3}{e^x-1}\,dx = \frac{\pi^4}{15}
\label{eq:sample}
\end{equation}
其中标签值eq:sample可被任何名称替换，比如myeq。而且公式中的\begin{equation}和\end{equation}不是必须的。例如，这是对本文公式示例中第一个公式 \eqref{aabb} 的引用。
自动断行
由于自动断行将消耗额外的处理从而影响公式的显示速度，因此默认情况下 MathJax 的自动断行处理是关闭状态，但是遇到比较长的公式时容易超出页面范围，严重影响页面的显示效果，因此需要开启它，方法是添加以下配置信息：
1 <script type="text/x-mathjax-config">
2 MathJax.Hub.Config({
3 "HTML-CSS": { linebreaks: { automatic: true } },
4 SVG: { linebreaks: { automatic: true } }
5 });
6 </script>
自动断行仅处理段间公式，对行内公式不做处理。还可以通过width控制断行的宽度，默认为container，可制定具体的值，比如：
"HTML-CSS": { linebreaks: { automatic: true, width: "450px" } }
样式控制
默认情况下，公式与正文的前后距离比较大，原则上可通过样式控制修改其显示方式2，例如官方下载的 MathJax 源码包的 jax/output/HTML-CSS/config.js 文件中有以下样式控制信息：
styles: {
".MathJax_Display": {
"text-align": "center",
margin: "1em 0em"
},
".MathJax .merror": {
"background-color": "#FFFF88",
color: "#CC0000",
border: "1px solid #CC0000",
padding: "1px 3px",
"font-style": "normal",
"font-size": "90%"
}
}
那么就可在配置函数中进行样式控制：
MathJax.Hub.Config({
"HTML-CSS": {
preferredFont: "STIX"，
scale: 100,
styles: { ".MathJax_Display": { "text-align": "center", margin: "0em 0em" },
".MathJax .merror": { "background-color": "#FFFF88", color: "#CC0000", border: "1px solid #CC0000", padding: "1px 3px", "font-style": "normal", "font-size": "90%" }}
}
});
但是，经测试没有任何效果，因此只能通过以下方式将公式与正文的距离控制的紧凑一些。在 style.css 样式表中添加以下信息：
p code.has-jax { margin:0; padding:0; }
数学公式示例
这是个行内公式 \(e^{i\pi}+1=0\) 。
下面都是段间公式，第一个公式使用了公式引用：
\[
\begin{aligned}
\dot{x} & = \sigma(y-x) \\
\dot{y} & = \rho x - y - xz \\
\dot{z} & = -\beta z + xy
\end{aligned}
\label{aabb}
\]
下面这个公式自定义了编号值：
\[
P(E) = {n \choose k} p^k (1-p)^{ n-k}
\tag{Eq-x}
\]
下面这个公式比较长，需要自动断行处理：
\[
1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots =
\prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})},
\quad\quad \text{for $|q|<1$}.
\]
最后一个公式没有自动编号：
\[
\int_0^\infty \frac{x^3}{e^x-1}\,dx = \frac{\pi^4}{15}
\notag
\]
参考链接
上一篇： RDiscount - Markdown for Ruby
下一篇：为啥是我得癌症？