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

  |  

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

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


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

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

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

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

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

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

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

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

改为

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

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

效果如下:

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

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

行内公式与行内代码冲突

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

1
`$ a+b $`

应该在 $ 前后加上空格。

1
` $ a+b $ `

效果如下:

$ a+b $

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

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

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

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

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

改为:

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

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

效果如下:

1
行内公式换行 $(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 后的正则表达式中把 ! 去掉即可。

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

效果如下:

1
$x\!y$

$x\!y$

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

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

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

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

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

改为

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

效果如下:

1
$\|a\|$

$\|a\|$


Share