在Hexo中渲染MathJax数学公式

最近在学习机器学习,课堂笔记中免不了有大量的数学公式,为了避免截图的麻烦,学习了用MathJax来渲染数学公式。Hexo完美地支持了MathJax的使用,但是由于渲染引擎的问题,默认情况下会出现不渲染的问题。

原因(引自推酷作者ShallowLearner)

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

因为类Latex格式书写的数学公式下划线 ‘_’ 表示下标,有特殊的含义,如果被强制转换为<\em>标签,那么MathJax引擎在渲染数学公式的时候就会出错。例如,$x_i$在开始被渲染的时候,处理为\$x<\em>i</em>$,这样MathJax引擎就认为该公式有语法错误,因为不会渲染。

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

解决方法

可以更换渲染引擎为hexo-renderer-kramed,其修复了默认引擎的一些Bug,能够更好地渲染MathJax公式而避免转义的麻烦。
安装过程如下:

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

在主题中开启MathJax开关

打开主题的 _config.yml 文件,如下片段:

# MathJax Support
mathjax:
enable: flase
per_page: false
cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

修改两个false值为true即可打开MathJax的支持。
此外为了提高访问速度,MathJax并不是全局打开的,要在需要使用MathJax的文章Front-matter打开开关才可以使用,格式如下:

-—
title: index.html
date: 2017-12-28 2017-06-10 19:34:20
tags:
mathjax: true
-—

使用实例

输入如下的LaTeX公式:

$$
J(\theta1,\theta_2)=\frac{1}{2m}\sum{i=1}^{m}(\widehat{yi}-y_i)^2 = \frac{1}{2m}\sum{i=1}^{m}(h_0(x_i)-y_i)^2
$$

即可渲染为:

此外,如果你不熟悉MathJax的语法,可以借助下列网站来帮助你生成LaTeX代码:
http://latex.codecogs.com/eqneditor/editor.php