hexo-renderer-kramed渲染冲突的问题

摘要: 一个支持公式的 hexo-renderer-kramed 渲染器的一些冲突问题

【对算法，数学，计算机感兴趣的同学，欢迎关注我哈，阅读更多原创文章】
我的网站：潮汐朝夕的生活实验室
我的公众号：算法题刷刷
我的知乎：潮汐朝夕
我的github：FennelDumplings
我的leetcode：FennelDumplings

---

由于我的文章经常涉及到各种公式，所以老早就换了个支持数学公式的渲染器 hexo-renderer-kramed，参考 支持公式。

但是 hexo-renderer-kramed 有时会出现一些渲染冲突的问题，本文记录一些最常见的情况和解法。主要参考下面的博客文章:

https://corecabin.cn/2021/08/14/solve-some-problems-of-hexo-renderer-kramed-rendering-conflicts/

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

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

Markdown本身的语法是支持 * 和 _ 都被转义为斜体的，所以我们可以取消掉 kramed 对 _ 的转义。具体做法是在本地 hexo 下的 ./node_modules/kramed/lib/rules/inline.js，找到以下代码:

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

改为

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

修改之后，使用斜体的话用 _ 就不行了，可以用 * 符号。历史文章中有用 _ 包围的斜体，发现之后改成 * 即可。

效果如下：

行内*斜体*，行内 $e_{1}, e_{2}$ 公式。

行内斜体，行内 $e_{1}, e_{2}$ 公式。

行内公式与行内代码冲突

要想在行内代码中输入行内公式的代码，下面的写法是不对的。

`$ a+b $`

应该在 $ 前后加上空格。

` $ a+b $ `

效果如下：

$ a+b $

反斜杠 \\ 被转义为 \ 而非 LaTeX 换行

当公式中出现 \\ 表示换行时，会被 kramed 渲染为 \，导致公式显示异常。

解法是取消掉对 \\ 的转义就行了。

找到本地 hexo 下的 ./node_modules/kramed/lib/rules/inline.js 中的以下代码:

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

改为：

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

修改之后，使用 \\ 就不再会渲染成 \ 了，直接写 \ 就是 \，但是 \_ 这种转义还是有效的：_。

效果如下：

行内公式换行 $(a + b)^{2} = a^{2} + 2ab + b^{2} \\ (a - b)^{2} = a^{2} - 2ab + b^{2}$ 的情况。

行内公式换行 $(a + b)^{2} = a^{2} + 2ab + b^{2} \\ (a - b)^{2} = a^{2} - 2ab + b^{2}$ 的情况。

LaTeX紧贴符 \! 不被转义

当公式中出现 \! 表示紧贴符号时，会被 kramed 渲染为 !，导致公式显示异常。

还是在 ./node_modules/kramed/lib/rules/inline.js 中，将 escape 后的正则表达式中把 ! 去掉即可。

修改之后，就取消了对 \! 的转义。

效果如下:

$x\!y$

$x\!y$

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

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

解法还是取消对 \| 的转义。

但是 ./node_modules/kramed/lib/rules/inline.js 中，escape 后没有 | 。不过后面可以找到以下代码：

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

改为

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

效果如下：

$\|a\|$

$\|a\|$

---