butterfly主题插入数学公式LaTeX

前言

我的博客中有一部分文章会是CTF Crypto题的writeup，所以解题原理部分经常会涉及到数学公式

hexo框架下默认搭配的Markdown渲染器是 hexo-renderer-marked，但其支持的渲染格式有限，而且并不支持排版系统LaTeX，以至于很多时候会出现想引用复杂数学公式却无法渲染的情况。

在butterfly主题下对hexo的Markdown渲染器的改进方案有两种：添加Mathjax或KaTeX语法引擎

由于本人做笔记一般是使用Markdown编译软件Typora，而Typora用的是MathJax引擎，所以本教程主要涉及butterfly主题下MathJax的安装和改进。KaTeX的配置方法可以在butterfly官方教程中找到。

配置Mathjax

替换hexo的markdown渲染引擎

在hexo的博客目录下输入以下指令
1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
前一句是用来删除原有的hexo-renderer-marked插件

编辑根目录下的_config.yml文件，在末尾中添加如下代码

kramed:
  gfm: true
  pedantic: false
  sanitize: false
  tables: true
  breaks: true
  smartLists: true
  smartypants: true

编辑根目录下的_config.butterfly.yml主题文件

将mathjax下的enable设置为true

推荐将per_page属性值也设置为true，这样会为博客每一篇文章都开启 Mathjax 服务，省去额外去文章的Front-matter中配置Mathjax参数的工作。

具体配置如下：
1
2
3
4
# MathJax
mathjax:
enable: true
per_page: true

Mathjax的语法

在Mathjax中使用数学公式的语法和LaTex基本一致

由于语法规则较为复杂，有大量使用规范需要记忆，所以一般我在实际编写过程中都会使用在线公式编辑器来将我需要的数学公式转化为LaTex表达式

在线LaTex公式编辑器链接：https://www.latexlive.com/

解决渲染冲突

在hexo框架下直接使用Mathjax时会遇到一些渲染冲突的问题

此时需要在原本的hexo-renderer-kramed插件上做出改动

以下是我在使用过程中遇到的两个问题及改进方法

下划线_被转义为斜体而非LaTeX下标

问题描述：当公式中出现多个下划线时，会被kramed渲染为Markdown斜体，导致公式显示异常。

Markdown本身的语法是支持*和_都被转义为斜体的，所以我们可以取消掉kramed对_的转义。

编辑博客根目录下相对路径路径为[Blogroot]/node_modules/kramed/lib/rules/inline.js的文件，找到第20行如下代码：

1	em: /^\b_((?:__\|[\s\S])+?)_\b\|^\((?:\\\|[\s\S])+?)\(?!\*)/,

修改为：

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

就取消了对下划线_的转义。

以后使用斜体的话只用*符号就够了。如果LaTeX要使用大量*符号，可用\ast代替。

反斜杠加竖线`\|`被转义为|而非LaTeX双竖线

问题描述：当公式中出现\|表示紧贴符号时，会被kramed渲染为|，导致公式显示异常。

还是inline.js代码的问题。

找到第64行如下代码：

1	escape: replace(inline.escape)('])', '~\|])')(),

修改为：

1	escape: replace(inline.escape)('])', '~])')(),

这样就取消了krame对\|的转义。

hexo-renderer-kramed不能渲染Todo List

编辑博客根目录下相对路径为[Blogroot]/node_modules/hexo-renderer-kramed/lib/renderer.js的文件，在第19行左右的空白处添加以下js代码：

// Support To-Do List
Renderer.prototype.listitem = function(text) {
  if (/^\s*\[[x ]\]\s*/.test(text)) {
    text = text.replace(/^\s*\[ \]\s*/, '<input type="checkbox"></input> ').replace(/^\s*\[x\]\s*/, '<input type="checkbox" checked></input> ');
    return '<li style="list-style: none">' + text + '</li>\n';
  } else {
    return '<li>' + text + '</li>\n';
  }
};