Hexo使用数学公式

发表于 分类于 Valine： 本文字数： 1.6k

参考：https://www.jianshu.com/p/7ab21c7f0674

在Hexo中渲染MathJax数学公式

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

原因

Hexo默认使用”hexo-renderer-marked”引擎渲染网页，该引擎会把一些特殊的markdown符号转换为相应的html标签，比如在markdown语法中，下划线’_’代表斜体，会被渲染引擎处理为<em>标签。
因为类Latex格式书写的数学公式下划线 ‘_’ 表示下标，有特殊的含义，如果被强制转换为<em>标签，那么MathJax引擎在渲染数学公式的时候就会出错。例如，$x_i$在开始被渲染的时候，处理为$x<em>i</em>$，这样MathJax引擎就认为该公式有语法错误，因为不会渲染。
类似的语义冲突的符号还包括’*’, ‘{‘, ‘}’, ‘\’等。

方法

更换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)。
同时把第20行的em变量也要做相应的修改。

em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/

开启mathjax

进入到主题目录，找到_config.yml配置问题，把mathjax默认的false修改为true，具体如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
# Math Formulas Render Support
math:
  enable: true
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: false

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

1
2
3
4
5
6
---
title: index.html
date: 2016-12-28 21:01:30
tags:
mathjax: true
--

这样就只有在用到公式的页面才加载 Mathjax，不需要渲染数学公式的页面的访问速度就不会受到影响了。

0%