【博客】解决Hexo博客next主题无法显示数学公式的问题

问题

在用markdown写技术文档时,免不了会碰到数学公式。常用的Markdown编辑器都会集成Mathjax,用来渲染文档中的类Latex格式书写的数学公式。基于Hexo搭建的个人博客,默认情况下渲染数学公式却会出现各种各样的问题。

原因

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

因为类 Latex 格式书写的数学公式下划线_表示下标,有特殊的含义,如果被强制转换为<em>标签,那么 MathJax 引擎在渲染数学公式的时候就会出错。

类似的语义冲突的符号还包括*, {, }, \\等。

解决方式

更换 Hexo 的 markdown 渲染引擎。如果你选择使用 MathJax 进行数学公式渲染,你需要使用 hexo-renderer-pandoc 或者 hexo-renderer-kramed (不推荐)作为 Hexo 的 Markdown 渲染器。

1
2
npm uninstall hexo-renderer-marked
npm install hexo-renderer-pandoc # 或者 hexo-renderer-kramed

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

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

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

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

重新启动hexo(先clean再generate),问题完美解决。哦,如果不幸还没解决的话,看看是不是还需要在使用的主题中配置mathjax开关。

在 Next 主题中开启 MathJax 开关

如何使用了主题了,别忘了在主题(Theme)中开启 MathJax 开关,下面以 next 主题为例,介绍下如何打开 MathJax 开关。

进入到博客根目录下的themes/next/,找到 _config.yml 配置,找到math的位置,把 math 默认的 false 修改为true,具体如下:

1
2
3
4
5
6
7
8
9
10
11
# Math Equations Render Support
math:
enable: true

# Default(true) will load mathjax/katex script on demand
# That is it only render those page who has 'mathjax: true' in Front Matter.
# If you set it to false, it will load mathjax/katex srcipt EVERY PAGE.
per_page: true

engine: mathjax
#engine: katex

还需要在文章的Front-matter里打开mathjax开关,如下:

1
2
3
4
title: index.html
date: 2018-07-05 12:01:30
tags:
mathjax: true

之所以要在文章头里设置开关,是因为考虑只有在用到公式的页面才加载 Mathjax,这样不需要渲染数学公式的页面的访问速度就不会受到影响了。

0%