0%

为Hexo网志添加MathJax渲染功能

说起来这样的文章应该一抓一大把,不喜勿喷。 :P

咱的网志之前一直没有数学公式的渲染功能,现在搞好了写个文章记录一下。OwO


更换渲染引擎

Hexo内建的渲染引擎hexo-renderer-marked比较菜,所以我们得换成hexo-renderer-kramed以支持MathJax渲染功能。

先卸载hexo-renderer-marked

npm uninstall hexo-renderer-marked --save

然后安装hexo-renderer-kramed

npm install hexo-renderer-kramed --save

更换引擎后,您应该执行一次hexo clean,再重新生成页面来使引擎生效。


修复引擎Bug

安装完毕后,我们需要修复引擎的一个Bug,这个Bug会导致行内公式渲染错误。

打开node_modules/kramed/lib/rules/inline.js文件,对inline变量做出以下修改:

注释escape行,改为:

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

注释em行,改为:

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

修改完成后的inline变量:

var inline = {
//escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
escape: /^\\([`*\[\]()#$+\-.!_>])/,
autolink: /^<([^ >]+(@|:\/)[^ >]+)>/,
url: noop,
html: /^<!--[\s\S]*?-->|^<(\w+(?!:\/|[^\w\s@]*@)\b)*?(?:"[^"]*"|'[^']*'|[^'">])*?>([\s\S]*?)?<\/\1>|^<(\w+(?!:\/|[^\w\s@]*@)\b)(?:"[^"]*"|'[^']*'|[^'">])*?>/,
link: /^!?\[(inside)\]\(href\)/,
reflink: /^!?\[(inside)\]\s*\[([^\]]*)\]/,
nolink: /^!?\[((?:\[[^\]]*\]|[^\[\]])*)\]/,
reffn: /^!?\[\^(inside)\]/,
strong: /^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,
//em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
code: /^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,
br: /^ {2,}\n(?!\s*$)/,
del: noop,
text: /^[\s\S]+?(?=[\\<!\[_*`$]| {2,}\n|$)/,
math: /^\$\$\s*([\s\S]*?[^\$])\s*\$\$(?!\$)/,
};

安装并开启MathJax渲染功能

接着,我们需要安装MathJax渲染插件:

npm install hexo-renderer-mathjax --save

p.s.: 如果你之前安装过类似hexo-math的渲染插件的话,那么你应该先卸载它。

然后开启你主题的MathJax渲染功能,这里以我所使用的主题NexT为例:

# Math Formulas Render Support
math:
# 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

mhchem这个东西是渲染化学公式的,如果不需要可以不开。上面的per_page是设置是否每页都启用MathJax,设为true需要在使用数学公式的页面配置项中加入一条mathjax: true,如果设为false,那么是每页启用MathJax,这里我设为true来让它加载更快点。


在文章中启用MathJax

你需要在你的文章配置项中加入mathjax: true来启用MathJax渲染功能(如果你把per_page设为false,那么可以跳过这一步):

title: 为Hexo网志添加MathJax渲染功能
date: 2021-08-30 15:22:58
tags: 技术
cagetories: 笔记
mathjax: true

一切都完成了。测试下你的MathJax吧~

====== End ======