hexo博客markdown数学公式渲染错误解决方法

最近上传博客的时候发现,某些数学公式在网页上显示错误。这里解决一下hexo默认公式渲染引擎出现语义冲突问题。本方法适用于hexo 3.8.0

问题描述

前几年的hexo博客版本中,会出现对于markdown数学公式中下划线 _ 的渲染错误。hexo将公式内的下划线 _ 识别成html语言渲染,从而导致排版错误。这个问题似乎已经在新版本中解决。

但是,在使用过程中,还是会碰见公式中星号*渲染错误的问题。

在Typora中公式预览正常:

image-20181120134317010

而上传之后,博客显示的为:

image-20181120134927976

显然 是将 * 识别成了斜体符号

解决方案

Hexo默认的公式渲染引擎为hexo-renderer-marked,既然公式渲染出现问题,就换了吧。

更换渲染引擎

更换Hexo的渲染引擎,更换为hexo-renderer-kramed。

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

安装之后,问题解决!现在重新上传之后,网页上的公式就显示正常了。

image-20181120140908558

关于行间公式渲染问题

部分博客提到,在跟换引擎之后,行间公式显示正常,但行内公式有时还是存在显示不正常的问题,笔者似乎没有遇到这种情况,遇到之后再来更新博客。遇到这种情况可查阅:hexo博客MathJax公式渲染问题 | 衡仔的技术小窝

2018.11.22更新,果不其然,笔者也遇到了这种情况。网页显示如下:

image-20181122182123871

源代码为

1
这是一个重要的例子。当分类问题有k类时, $y\in \{ 1,\dots,k \}$,由于参数 $\phi_{k-1} = 1-\sum_{i=1}^{k-1} \phi_i$,故$\phi_{k-1}$ 是冗余参数,则假设参数从 $\phi_1,\dots,\phi_{k-1} $

估计是kramed没有解决下划线_的渲染问题,这时候需要改变一下语义规则:

  1. 转到博客目录下的node_modules\kramed\lib\rules\inline.js

  2. 将原本escape,与em变量注释改为

    1
    2
    3
    4
    //escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,      第11行,将其修改为
    escape: /^\\([`*\[\]()#$+\-.!_>])/,
    //em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/, 第20行,将其修改为
    em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  3. hexo clean解决问题

    image-20181122183100569

小问题:双花括号

在寻找解决方法的时候,看见一个hexo渲染时的小问题。

在公式内如果连续使用两个即以上花括号,例如:

1
$ \frac{1}{{(2\pi)}^\frac{D}{2}} $

则会渲染失败。

image-20181120143619909

解决方法就是在两个花括号中间加入空格,即可正常渲染

1
$ \frac{1}{ {(2\pi)}^\frac{D}{2} } $

总结

总得来说就是把默认公式渲染引擎marked卸载了,然后装了一个新的渲染引擎kramed。

下面是些行间公式的测试。

$ x^{y^z}=(1+e^x)^{-2xy^w} {\{2}\} $

$ f(x,y,z)=3y^2z(3+\frac{7x+5}{1+y^2}) $

${2}$

$\sqrt{2}、\sqrt[3]{9}$

$x_1x_2{\ldots}x_n $

$\color{red}{红色}$

$\sum_{i=1}^n \frac{1}{i^2}$

$a[1]+a[2]\over2$