从零开始建立个人博客VII：插入表格公式

Posted on In , Views: Waline:

基础Markdown支持表格而不支持公式，好在很多扩展的Markdown都加入了公式支持。
要在Hexo博客中使用表格无需任何额外设置，而使用数学公式则相对复杂。

Markdown语法

表格
表格头部必须用至少三个虚线分割，使用|作为列的分界；对表格分界线对齐以及外边界|都是不必要的。
要在表格内使用竖线|只能用HTML代码&#124;或&vert;。类似的遇到其他具有特殊含义符号也都可以通过HTML代码来实现，如\为&#92，/为&bsol，而表格内换行可以由<br>实现。

1
2
3
4
5
| Tables        |      Are      |      Cool     |
|---------------|:-------------:|--------------:|
| left-aligned  |   centered    | right-aligned |
| Hexo          |    support    |    Tables     |
| `&#124;`      |   is needed   |  to show `|`  |
Tables Are Cool
left-aligned centered right-aligned
Hexo support Tables
&#124; is needed to show |

数学公式
基本的Markdown并不支持数学公式，但很多扩展的Markdown都加入了对公式的支持。
使用基本类似于LaTeX：行内公式用\( ... \)或$...$标示；整行或多行公式，即方程(组)环境则由\[ ... \]或$$...$$标示；此外还支持其他的LaTeX环境，如对齐aligned、数组array、矩阵martix等等。

Hexo支持

Hexo默认使用marked解析Markdown，支持表格但不支持公式，使用公式需要：

  • 替换默认的解析引擎，使用pandoc, kramed, Markdown-it等；
    npm uninstall hexo-renderer-marked
    npm install hexo-renderer-markdown-it-plus
  • 在博客配置文件_config.yml中开启新的解析引擎插件；
  • 在要使用公式的文章Front matter中设置开启MathJaxmathjax: true。

对于NexT主题，由于主题加入了对公式的支持，因此上述第二步可以替换为在主题配置文件_config.yml中开启MathJax或KaTeX，其他步骤相同。
注意：当前(2018.5.1)NexT主题默认的KaTeX版本为0.7.1，配合hexo-renderer-markdown-it-plus公式显示有问题，修改为0.9版本就好了。

生成的HTML网页中公式的最终显示需要通过MathJax或KaTeX进行渲染。KaTeX渲染速度比MathJax快，但会缺失部分特性，目前支持的语法可参考文档。KaTeX目前支持的环境具体有：数组(array, darray)、矩阵(matrix, pmatrix, bmatrix, Bmatrix, vmatrix, Vmatrix)、对齐(aligned, alignedat)、聚集(gathered)、分段/分情况(cases, dcases)
注意：目前KaTeX不支持$$....$$环境中\\换行 #171 ，方程组需要使用aligned等环境实现(Bug关闭了，说是问题解决了，但实际使用时仍有问题，下面有例子)。

代码实例

下面展示部分公式及相对应的Markdown原文：
行内公式(inline formula)：H=−∑i=1N(σixσi+1x+gσiz)H=-\sum_{i=1}^N (\sigma_{i}^x \sigma_{i+1}^x+g \sigma_{i}^z)

1
$H=-\sum_{i=1}^N (\sigma_{i}^x \sigma_{i+1}^x+g \sigma_{i}^z)$

整行公式(displayed formula):

H=−∑i=1N(σixσi+1x+gσiz)H=-\sum_{i=1}^N (\sigma_{i}^x \sigma_{i+1}^x+g \sigma_{i}^z) 

1
$$ H=-\sum_{i=1}^N (\sigma_{i}^x \sigma_{i+1}^x+g \sigma_{i}^z) $$

分段函数

f(n)={n2,if n is even3n+1,if n is oddf(n) =\begin{cases} \frac{n}{2}, & \text{if } n\text{ is even}\\ 3n+1, & \text{if } n\text{ is odd} \end{cases} 

1
2
3
4
5
6
$$
f(n) =\begin{cases}
 \frac{n}{2}, & \text{if } n\text{ is even}\\
 3n+1,  & \text{if } n\text{ is odd}
\end{cases}
$$

积分

Pω=ℏω 1+R1−v2∫−11dx (x−v)∣x−v∣P_\omega=\hbar\omega\,{1+R\over 1-v^2}\int\limits_{-1}^{1}dx\,(x-v)|x-v| 

1
$$P_\omega=\hbar\omega\,{1+R\over 1-v^2}\int\limits_{-1}^{1}dx\,(x-v)|x-v|$$

方程组

y=Wx+b∂y∂x=WT∂y∂W=xT\begin{aligned} y = Wx + b\\ \frac{\partial y}{\partial x} = W^T\\ \frac{\partial y}{\partial W} = x^T \end{aligned} 

1
2
3
4
5
6
7
$$
\begin{aligned}
y = Wx + b\\
\frac{\partial y}{\partial x} = W^T\\
\frac{\partial y}{\partial W} = x^T
\end{aligned}
$$

KaTeX $$....$$环境不支持\\的bug似乎解决了，但当使用\\，虽然公式可以显示但渲染时会有警告信息：In LaTeX, \\ or \newline does nothing in display mode [newLineInDisplayMode]。似乎是说\\没有作用，但如果不使用又确实不会换行，不清楚警告是什么意思。最终，目前最好的做法依然是上面讲的在aligned环境中使用\\。

1
2
3
4
5
$$
y = Wx + b
\frac{\partial y}{\partial x} = W^T
\frac{\partial y}{\partial W} = x^T
$$

会显示为：

y=Wx+b∂y∂x=WT∂y∂W=xTy = Wx + b \frac{\partial y}{\partial x} = W^T \frac{\partial y}{\partial W} = x^T

矩阵

Tμν=(−1000010000100001)T^{\mu\nu}= \begin{pmatrix} -1&0&0&0\\ 0&1&0&0\\ 0&0&1&0\\ 0&0&0&1 \end{pmatrix} 

1
2
3
4
5
6
7
8
9
$$
T^{\mu\nu}=
\begin{pmatrix}
-1&0&0&0\\
0&1&0&0\\
0&0&1&0\\
0&0&0&1
\end{pmatrix}
$$

Tips

  • 字号：\small、\footnotesize
  • 字体：粗体\bm{} 花体\mathscr{} 空心粗体\mathbb{}
  • 公式添加颜色：\textcolor{blue}{}
  • 在公式中插入文本：\text{}、\textrm{}
  • 括号大小：括号内有分数等时会希望括号与内容一样高：用\left( \right)代替普通的()
  • 括号大小：括号大小还可以手动调节，除默认外有四挡\big、\Big、\bigg、\Bigg
  • 函数或符号名不用数学字体：KaTeX已包含常见的函数或符号名均，直接在前面加\即可，如\sin, \log, \max \lim等，对于不常见的可以用\operatorname{}。
  • 风格：行内公式的积分符号特别丑；行内公式的运算符号的下标会在符号右下，而非正下放。在公式前加\displaystyle可以使行内公式按整行公式样式显示；类似的，在整行中使用\textstyle可以呈现行内公式风格。

问题解决

marked替换为markdown-it后，公式可以显示了，但出现了更多之前没有的问题：

  • 图片无法正常显示
  • 部分文字不能正确换行

经过测试发现具体有三个问题：

  1. 图片路径或图片名中含有空格，图片无法显示
  2. 图片位于HTML布局代码(居中)内，且插入图片的行与HTML代码间没有空行，图片无法显示
  3. 文本位于HTML布局代码(右对齐)内，文字换行失效

解决办法:

  1. 修改图片文件及文件夹名，去掉空格
  2. NexT主题默认图片就是居中的，不需HTML布局代码
  3. 手动加<br />换行或使用<pre>...</pre>元素

(2018.07.12)针对第三个问题：文本位于HTML布局代码内时换行失效
与图片情况类似，只要在文本内容前和HTML代码间加入空行就可以了

扩展阅读

如何在Hexo中使用Mathjax渲染LaTeX数学公式
Hexo 博客支持 KaTeX