给网页添加数学公式渲染支持的邪道方法

发表于 更新于 分类于

今天重拾网站, 打算把之前写的一些东西放上来, 结果一开始就遇到了给 Hexo 的 markdown 添加数学公式渲染的问题. 最终通过邪道解决了, 在这里记录一下. 并不确定所有步骤都是必要且正确的, 仅供参考.

  1. 卸载 hexo-renderer-marked 并安装 hexo-math 和 hexo-renderer-kramed:
1
2
3
npm uninstall hexo-renderer-marked --save
npm install hexo-math
npm install hexo-renderer-kramed --save
  1. 由于我用的是 next 系列主题, 打开 (博客文件夹)\themes\next\_config.yml 文件, 将其中的
1
2
3
4
math:
  mathjax:
    enable: false
    mhchem: false

修改为

1
2
3
4
5
math:
  mathjax:
    enable: true
    per_page: true
    cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML
  1. 由于 markdown 和 tex 语法有部分冲突, 并且我存在在一篇文章里同时使用 _ 和 * 的需求, 所以我选择直接修改将 markdown 转为 html 的配置: 打开 (博客文件夹)\node_modules\kramed\lib\rules\inline.js 文件, 并将
1
2
3
4
5
6
7
var inline = {
  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  ...
  strong: /^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,
  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  ...
};

修改为

1
2
3
4
5
6
7
var inline = {
  escape: /^\\([`*\[\]()#$+\-.!_>])/,
  ...
  strong: /^___([\s\S]+?)___(?!_)/,
  em: /^\b__((?:___|[\s\S])+?)__\b/,
  ...
};

其中 escape 取消了 \,{,} 的转义, strong 和 em 取消了用 * 控制斜/粗体, 并且将 _ 的控制改为了两个为斜体, 三个为粗体, 五个为粗斜体. 因为数学模式下不会出现超过一个的 _, 因此不会再发生匹配错误. 我知道 \b 匹配的就是单词的末端, 但是我不希望类似 $_12_$ 这样错误的代码会被错误地作为斜体显示出来, 而不是报错. 这导致我以后只能使用这个变种的 markdown 来写文章了, 所以不推荐各位这么做.