解决hexo-renderer-kramed渲染冲突的部分问题
原文地址：https://corecabin.cn/2021/08/14/solve-some-problems-of-hexo-renderer-kramed-rendering-conflicts/
文章目录
-
- 1 hexo-renderer-kramed不能渲染Todo List
- 2 hexo-renderer-kramed渲染MathJax时与Markdown语法冲突
-
- 2.1 行内公式与行内代码冲突
- 2.2 下划线`_`被转义为斜体而非LaTeX下标
- 2.3 反斜杠`\\`被转义为`\`而非LaTeX换行
- 2.4 LaTeX紧贴符`\!`不被转义
- 2.5 反斜杠加竖线`\|`被转义为`|`而非LaTeX双竖线
- 3 总结
因hexo-renderer-marked不支持数学公式的渲染，其他渲染器又有一些问题，如hexo-renderer-pandoc过于沉重，hexo-renderer-markdown-it对NexT主题支持不佳，因此选用hexo-renderer-kramed渲染器。本文解决了该渲染器在渲染Markdown及数学公式时遇到的部分问题。
1 hexo-renderer-kramed不能渲染Todo List
原来的渲染器hexo-renderer-marked是支持的，那就翻一下hexo-renderer-marked的GitHub仓库的Pull Request。
发现在这个PR里，hexo-renderer-marked加入了对Todo List的支持，那就拷贝这个PR中lib/renderer.js里新增的代码：
// Support To-Do List
Renderer.prototype.listitem = function(text) {
if (/^\s*\[[x ]\]\s*/.test(text)) {
text = text.replace(/^\s*\[ \]\s*/, ' ').replace(/^\s*\[x\]\s*/, ' ');
return '' + text + '\n';
} else {
return '' + text + '\n';
}
};
加入到本地的hexo文件夹的/node_modules/hexo-renderer-kramed/lib/renderer.js的第19行中。
保存后重新hexo clean、hexo g，就渲染成功了。
其实这个解决方案不是我翻PR找到的，而是我在GitHub乱搜索时在这里找到的。本来并不指望解决这个问题的，又学到一招。
2 hexo-renderer-kramed渲染MathJax时与Markdown语法冲突
关于如何修改语义冲突，网上的教程讲得很详细了，比如：
- hexo下LaTeX无法显示的解决方案 - zealscott - 简书
- 解决hexo-next主题和mathjax下划线冲突问题 | 拾荒志
但网上找到的教程通常只讲述了如何修改_和\\的冲突。我将我遇到的所有问题一一整理如下。
下文的问题通常是行内公式的问题，目前看来公式块受到的影响比较小。
2.1 行内公式与行内代码冲突
问题描述：把行内公式作为行内代码输入时（如下），会显示异常，即`` ‘ 被 转 义 成 ‘ `被转义成` ‘被转义成‘`了。
`$ a+b $`
翻一下hexo-renderer-kramed的文档，发现作者写在这里了：
所以要想输入行内代码中的公式，在$前后加上空格就行了：
` $ a+b $ `
2.2 下划线_被转义为斜体而非LaTeX下标
问题描述：当公式中出现多个下划线时，会被kramed渲染为Markdown斜体，导致公式显示异常。
Markdown本身的语法是支持*和_都被转义为斜体的，所以我们可以取消掉kramed对_的转义。
打开本地hexo文件夹下的/node_modules/kramed/lib/rules/inline.js，找到第20行如下代码：
em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
修改为：
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
就取消了对下划线_的转义。
以后使用斜体的话只用*符号就够了。如果LaTeX要使用大量*符号，可用\ast代替。
2.3 反斜杠\\被转义为\而非LaTeX换行
问题描述：当公式中出现\\表示换行时，会被kramed渲染为\，导致公式显示异常。
取消掉对\\的转义就行了。
同上，找到inline.js中第11行如下代码：
escape: /^\\([\\`*\[\]()#$+\-.!_>])/,
修改为：
escape: /^\\([`*\[\]()#$+\-.!_>])/,
就取消了对反斜杠\\的转义。
2.4 LaTeX紧贴符\!不被转义
问题描述：当公式中出现\!表示紧贴符号时，会被kramed渲染为!，导致公式显示异常。
同上，把escape:后的正则表达式中的!去掉即可，取消掉对\!的转义。
2.5 反斜杠加竖线\|被转义为|而非LaTeX双竖线
问题描述：当公式中出现\|表示紧贴符号时，会被kramed渲染为|，导致公式显示异常。
真是个困扰了半天的bug，上面的escape:后面也没有|啊。
找了我n个小时，原来还是inline.js代码的问题。
找到第64行如下代码：
escape: replace(inline.escape)('])', '~|])')(),
修改为：
escape: replace(inline.escape)('])', '~])')(),
就取消了对\|的转义。
执行完以上步骤后，记得hexo clean、hexo g走一波。
总结：哪里被kramed转义就检查escape对应的部分。
3 总结
- 多上GitHub看看原仓库的文档、issues、PR，会有收获的，实在不行直接搜，比百度好使。
- 熟悉流程，Hexo的原理是根据渲染器，把Markdown语法转为HTML语法。所以一些显示bug不一定是主题的问题，而很有可能是渲染器的问题。所以看看渲染器的源码总是有收获的。
欢迎来核心舱玩：卡洛的核心舱