Hexo 数学公式无法渲染问题

学习机器学习做笔记的时候会需要插入很多公式,但是这些数学公式在hexo上传时,无法发布,出现乱码。

本地数学公式编辑:

使用Macdown 进行编辑。 在 Macdown-偏好设置-Rendering中,选中 Tex-like math syntax以及下面的Use dollar sign($) as inline delimiter。就可以很简单的进行数学公式编辑。

在hexo中安装Mathjax插件:

1
npm install hexo-math –save

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

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

解决语义冲突

由于LaTeX与markdown语法有语义冲突,在markdown中,斜体和加粗可以用或者_表示,在这里我们修改变量,将_用于LaTeX,而使用表示markdown中的斜体和加粗。
在博客根目录下,进入node_modules\kramed\lib\rules\inline.js,把第11行的escape变量的值做相应的修改:

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

这一步是在原基础上取消了对,{,}的转义(escape)。

同时把第20行的em变量也要做相应的修改:

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

更改配置文件

进入到主题目录,找到_config.yml配置问题,把mathjax默认的false修改为true,并更换cdn的url,具体如下:

1
2
3
4
5
6
7
# MathJax Support
mathjax:
enable: true
per_page: true
#cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML
cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML

博客标头添加

在每次需要用LaTeX渲染的博文中,在文章的Front-matter里打开mathjax开关,具体如下:

{
1
2
3
4
title: index.html
date: 2018-2-20 21:01:30
tags:
mathjax: true

测试

$f’({ {x}_{0}})=\underset{\Delta x\to 0}{\mathop{\lim }}\,\frac{f({ {x}_{0}}+\Delta x)-f({ {x}_{0}})}{\Delta x}$

note:
如果hexo -g出现

1
2
3
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Template render error: (unknown path) [Line 15, Column 76]
expected variable end

检查公式是否出现连续两个{, 解决办法在{中间添加空格。

如果觉得对您有帮助,就扫我交个朋友吧!