如何在Hexo中渲染公式

​ 优化公式渲染,本文基于Cactus主题修改。

  


  

   常用的Markdown编辑器都会集成 Mathjax ,用来渲染文档中的类Latex格式书写的数学公式。而Hexo默认使用 hexo-renderer-marked 引擎渲染网页,该引擎会把一些特殊的markdown符号转换为相应的html标签。

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

安装 Kramed 和 Mathjax

1
2
3
4
5
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
npm uninstall hexo-math --save
npm install hexo-renderer-mathjax --save

更新 Mathjax 链接

在 node_modules/hexo-renderer-mathjax/mathjax.html 中修改代码:

1
2
3
4
<!--
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>

更新转义规则

在 node_modules/kramed/lib/rules/inline.js 中修改代码:

1
2
3
4
5
//escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
escape: /^\\([`*\[\]()# +\-.!_>])/,
//em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

开启 Mathjax

在 _config.yml 中添加代码:

1
2
mathjax:
enable: true

在文章中选择性开启 Mathjax:

1
2
3
4
5
6
7
8
---
title: 如何在Hexo中渲染公式
date: 2018-07-01 18:47:36
categories: 环境搭建
tags:
- Doc
mathjax: true
---

部署使用

1
2
3
hexo clean
hexo g
hexo d

参考

https://blog.csdn.net/u014630987/article/details/78670258

https://www.jianshu.com/p/7ab21c7f0674