博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
hexo博客MathJax公式渲染问题
阅读量:6835 次
发布时间:2019-06-26

本文共 3851 字,大约阅读时间需要 12 分钟。

这个问题自己很早以前便碰到了,用MathJax语法写的一些公式,在本地Markdown编译器上渲染是没问题的,可是部署到hexo博客中就出现问题了,之前我是使用图片代替公式应付过去了,今天从网上找了一下资料,发现了其问题所在,同时也解决了这个问题。

问题

hexo默认使用hexo-renderer-marked引擎去渲染网页,它会把利用Markdown语法写的文本去转换为相应的html标签。在利用Markdown写MathJax公式的时候,经常会用到下划线_表示下标,但是下划线_会被hexo的默认引擎hexo-renderer-marked渲染成html中的<em>标签,表示斜体,这样一来,我们写的MathJax公式就被错误渲染了,也就没办法正确显示出来。

例如:

在我写的这篇文章中,没有解决问题之前,出现着各种渲染错误,而当你仔细观察那些错误之处时,会发现你写的MathJax公式中的下划线_会莫名其妙地消失。

下图是我利用Markdown编译器写的文本

post22_3.png

是表格的一部分,在Markdown编译器预览是正确的,如下图

post22_8.png

但是部署到hexo博客后,便出现了错误,呈现的效果如下图

post22_2.png

我们发现公式没有渲染成功,仔细观察这个式子特征,发现它和我之前写的相比,少了部分_,打开该网页源代码,定位到这里,如下图

post22_1.png

会发现缺少的_其实是被hexo的渲染引擎渲染成了html中的<em>标签,这样一来,这个公式就不完整了,那么也就不能正确显示了。

解决方法

从上面的分析,我们可以知道问题或许出在hexo的渲染引擎上,如果渲染引擎不把公式中的一些特殊字符渲染成html标签,也就避免了这个问题。当然已经有人意识到了这个问题,并且对原先的渲染引擎进行了改进,生成了新的hexo-renderer-kramed引擎,这里是它的,所以我们只需要卸载默认引擎,并安装这个新的渲染引擎即可。

npm uninstall hexo-renderer-marked --savenpm install hexo-renderer-kramed --save

我之前写有一篇,就是在这里发现的渲染出错问题,当我把渲染引擎更换之后,发现大部分公式都正确渲染了,而从网上其他人的叙述中,也同样提到了这个问题,即是行间公式都没有问题,但是个别行内公式还会出现渲染出错,从网上找到了一个方法,解决了这一问题。

定位到你的博客根目录,找到../node_modules/kramed/lib/rules/inline.js文件,

post22_7.png

进行部分修改:

//escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,      第11行,将其修改为escape: /^\\([`*\[\]()#$+\-.!_>])/,//em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,    第20行,将其修改为em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

它取消了该渲染引擎对\,{,}的转义,然后再hexo clean、hexo g重新部署,即可解决问题。

另外需要注意一点,对于需要用到MathJax公式的文章,要在Front-matter中打开MathJax开关,例如:

---date: 2017/8/3 18:20:00tags: hexomathjax: truetitle: hexo博客MathJax公式渲染---

MathJax公式语法

下面呢,我整理总结了一番比较常用的MathJax公式语法,同时也可以用来测试一下渲染效果。

符号 释义 测试用例 最终效果
^ 上标 x^{y^z}=(1+e^x)^{-2xy^w} $ x^{y^z}=(1+e^x)^{-2xy^w} \(| |_|下标| CO_2 |\) CO_2 \(| |\frac{分子}{分母} or 分子 \over 分母|分数| f(x,y,z)=3y^2z(3+\frac{7x+5}{1+y^2}) |\) f(x,y,z)=3y^2z(3+\frac{7x+5}{1+y^2}) \(| |\sqrt[根指数,省略时为2]{被开方数}|开方|\sqrt{2}、\sqrt[3]{9} |\)\sqrt{2} 、\sqrt[3]{9}\(| | \ldots|与文本底线对齐的省略号|x_1x_2{\ldots}x_n |\)x_1x_2{\ldots}x_n\(| |\cdots|与文本中线对齐的省略号| x_1x_2{\cdots}x_n |\)x_1x_2{\cdots}x_n\(| |\int_积分下限^积分上限(被积表达式)|积分|\int_1^n{x^2}dx |\) \int_1^n{x^2}dx \(| |\sum_{下标表达式}^{上标表达式} {累加表达式}|累加|\sum_{i=1}^n \frac{1}{i^2} |\) \sum_{i=1}^n \frac{1}{i^2} \(| |\\, or \; or \quad or \qquad|不同宽度的空格| a \, b \mid a \; b \mid a \quad b \mid a \qquad b |\) a , b \mid a ; b \mid a \quad b \mid a \qquad b \(| |\color{颜色}{文字}|更改文字颜色|\color{red}{红色} |\) \color{red}{红色} $

上面的一些基本语法使用了行内公式, 渲染效果没有问题,下面再利用行间公式写一些较为复杂的公式。

分段函数

分段函数格式为f(x)=\begin{cases}语句1\\语句2\\...\end{cases}

\text{文字}中仍可以使用$公式$去插入其他公式,所以可以将其结合分段函数一起使用。

实例:

md文本

$$ f(n)=\begin{cases}n/2, & \text{如果$ x<=2 $}\\3n+1, & \text{如果$ x>2 $}\end{cases}$$

最终效果

\[ f(n)=\begin{cases} n/2, & \text{如果$ x<=2 $}\\ 3n+1, & \text{如果$ x>2 $} \end{cases} \]

大括号和小括号

()、[]、{}表示的即是符号本身,使用\{\}来表示{}。但是如果要显示大号的括号时,需要使用\left\right命令。

实例:

  • 正常括号

md文本

$$f([\frac{1+\{x,y\}}{(\frac{x}{y}+\frac{y}{x})(u+1)}+a]^{3\2})$$

最终效果

\[ f([\frac{1+\{x,y\}}{(\frac{x}{y}+\frac{y}{x})(u+1)}+a]^{3\2}) \]

  • 大括号

md文本

$$f\left(    \left[        \frac{            1+\left\{x,y\right\}        }{        \left(            \frac{x}{y}+\frac{y}{x}        \right)        \left(u+1\right)        }+a    \right]^{3\2}\right)$$

最终效果

\[ f\left( \left[ \frac{ 1+\left\{x,y\right\} }{ \left( \frac{x}{y}+\frac{y}{x} \right) \left(u+1\right) }+a \right]^{3\2} \right) \]

添加删除线

使用删除线功能必须使用行间公式,删除线分为片段删除线整段删除线,样式比较多,在这里我只列举一种比较常用的水平删除线,它属于整段删除线的一种。

整段删除线使用\require{enclose}来显示,声明整段删除线后,使用\enclose{删除线效果}{字符}来实现删除线效果,而水平删除线效果用关键字horizontalstrike

实例:

md文本

$$\require{enclose}\begin{array}{}\enclose{horizontalstrike}{x+y}\\\enclose{horizontalstrike}{x*y}\\\end{array}$$

最终效果

\[ \require{enclose}\begin{array}{} \enclose{horizontalstrike}{x+y}\\ \enclose{horizontalstrike}{x*y}\\ \end{array} \]

注意事项

我在更换hexo的渲染引擎的时候,还出了一点问题,当我卸载了原先的渲染引擎,安装新的时,出了错误,如下图:

post22_9.png

它显示我的npm版本为v4.2.0,我将npm更新到了最新版本,再次安装,便没有问题了。

通过这篇文章和,里面也涉及了较多的MathJax公式,从效果上来看,都没有出现什么问题,这也说明了该方法还是有一定的效果的。

参考资料

转载于:https://www.cnblogs.com/Ai-heng/p/7282110.html

你可能感兴趣的文章
修改GDAL库支持RPC像方改正模型
查看>>
UVALive5461 UVA615 POJ1308 Is It A Tree?(解法二)
查看>>
dataGridView 去除默认选择
查看>>
物理删除和逻辑删除
查看>>
MFC中使用ADO的记录集
查看>>
nodejs中 require 方法的加载规则
查看>>
webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件...
查看>>
jQuery
查看>>
RH253读书笔记(2)-Lab 2 System Resource Access Controls
查看>>
miterLimit和lineJoin属性
查看>>
用手抓饭增食欲
查看>>
就算会用python画颗心,可你依然还是只单身狗
查看>>
#5 string and custom functions && regular expressions
查看>>
.net mvc 分页
查看>>
django 中静态文件项目加载问题
查看>>
评价cnblogs的用户体验
查看>>
我的Android进阶之旅------>Android疯狂连连看游戏的实现之开发游戏界面(二)
查看>>
我的Android进阶之旅------>Android利用温度传感器实现带动画效果的电子温度计
查看>>
HTML中添加音乐video embed audio
查看>>
Docker 镜像的导入和导出
查看>>