解决hexo-renderer-kramed渲染冲突的部分问题

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

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*/, '<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';
  }
};

加入到本地的hexo文件夹的/node_modules/hexo-renderer-kramed/lib/renderer.js的第19行中。

保存后重新hexo cleanhexo g,就渲染成功了。

其实这个解决方案不是我翻PR找到的,而是我在GitHub乱搜索时在这里找到的。本来并不指望解决这个问题的,又学到一招。

2 hexo-renderer-kramed渲染MathJax时与Markdown语法冲突

关于如何修改语义冲突,网上的教程讲得很详细了,比如:

但网上找到的教程通常只讲述了如何修改_\\的冲突。我将我遇到的所有问题一一整理如下。

下文的问题通常是行内公式的问题,目前看来公式块受到的影响比较小。

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 cleanhexo g走一波。

总结:哪里被kramed转义就检查escape对应的部分。

3 总结

  • 多上GitHub看看原仓库的文档、issues、PR,会有收获的,实在不行直接搜,比百度好使。
  • 熟悉流程,Hexo的原理是根据渲染器,把Markdown语法转为HTML语法。所以一些显示bug不一定是主题的问题,而很有可能是渲染器的问题。所以看看渲染器的源码总是有收获的。

欢迎来核心舱玩:卡洛的核心舱

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值