0%

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

基础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中开启MathJaxKaTeX,其他步骤相同。
注意:当前(2018.5.1)NexT主题默认的KaTeX版本为0.7.1,配合hexo-renderer-markdown-it-plus公式显示有问题,修改为0.9版本就好了。

生成的HTML网页中公式的最终显示需要通过MathJaxKaTeX进行渲染。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+R1v211dx(xv)xvP_\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+byx=WTyW=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+byx=WTyW=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

Donate if you enjoy this content.