Hexo 博客正确显示数学公式


Hexo 博客正确显示数学公式

昨天和前天提交作业的时候,MD文档的公式显示正常。部署后发现自己的博客有的公式可以正常显示,有的但是不可以,行内的公式也有问题。最开始我以为是自己公式打得有问题,后来排查了下是有的符号会被转译成别的东西,具体就没有深究了,参考这篇博客修改正确:

hexo next主题解决无法显示数学公式

原因

Hexo 默认使用 hexo-renderer-marked 引擎渲染网页,该引擎会把一些特殊的 markdown 符号转换为相应的 html 标签,比如在 markdown 语法中,下划线_代表斜体,会被渲染引擎处理为<em>标签。

因为类 Latex 格式书写的数学公式下划线_表示下标,有特殊的含义,如果被强制转换为<em>标签,那么 MathJax 引擎在渲染数学公式的时候就会出错。类似的语义冲突的符号还包括*, {, }, \\等。

解决方法

1. 更换 Hexo 的 Markdown 渲染引擎

更换 Hexo 的 markdown 渲染引擎,hexo-renderer-kramed 引擎是在默认的渲染引擎 hexo-renderer-marked 的基础上修改了一些 bug ,两者比较接近,也比较轻量级。

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

执行上面的命令即可,先卸载原来的渲染引擎,再安装新的。
然后,跟换引擎后行间公式可以正确渲染了,但是这样还没有完全解决问题,行内公式的渲染还是有问题,因为 hexo-renderer-kramed 引擎也有语义冲突的问题。接下来到博客根目录下,找到 node_modules\kramed\lib\rules\inline.js,把第11行的 escape 变量的值做相应的修改:

//escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
escape: /^\\([`*\[\]()#$+\-.!_>])/,

这一步是在原基础上取消了对\,{,}的转义(escape)。
同时把第20行的 em 变量也要做相应的修改。

//em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

2.在 Hexo 主题中开启 MathJax 开关

如何使用了主题了,别忘了在主题(Theme)中开启 MathJax 开关,因为我原本也是打开的,这里也记录下,保证完整性。下面以 Matery 主题为例,介绍下如何打开 MathJax 开关。

  1. 进入到主题目录,找到 _config.yml 配置,把 math 默认的 false 修改为true,具体如下:
# Whether to activate the mathjax, this is a global configuration, but the post still does not open the mathjax rendering.
# Considering that the mathjax loading is time consuming,
# you also need to add `mathjax: true` to the Front-matter of the post that needs to be rendered.
# 是否激活mathjax数学公式,这是全局配置,但文章仍然不会都开启mathjax渲染,
# 考虑到mathjax加载比较耗时,你还需要在需要渲染的文章的Front-matter中再加上`mathjax: true`才行.
mathjax:
  enable: true
  cdn: https://cdn.bootcss.com/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML
  1. 在文章的 Front-matter 里打开 mathjax 开关,如下:
title: Task4 NFM
date: 2021-03-24 22:42:19
mathjax: true
tags:
- DataWhale

这里需要注意的是,mathjax 加载比较耗时,建议有公式的博客添加,没有公式的就不要加这个了。

参考资料


文章作者: Terence Cai
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Terence Cai !
  目录