定制 Wordpress Markdown 编辑器及语法高亮

需要的插件

反复比较了多种方案,最终选择了如下两个插件。
(WP Editor.md 本身自带语法高亮功能,理论上不需要再使用 Crayon Syntax Highlighter。但我没有试成功,原因未明。由于 Crayon Syntax Highlighter 足够好用,便没有深究。)

遇到的主要问题

短代码高亮及代码多余尾行问题

网上资料大多通过对 Crayon Syntax Highlighter 进行如下设置,解决 markdown 代码块高亮的异常显示。

但如果不勾选 “Capture code as Inline Tag” ,会导致使用单个反引号`标记短代码无法被高亮。
停用 Crayon Syntax Highlighter 之后,F12 一下,观察 markdown 插件的渲染规则:

  1. 单反引号标记的代码会被渲染成 <code></code>
  2. 三反引号标记的代码会被渲染成 <pre><code></code></pre>

这会导致一个二难境地,如果不勾选 “Capture code as Inline Tag”,那么单反引号渲染出的 code 标签不会被 Crayon Syntax Highlighter 进一步高亮。相反,如果勾选该选项, <pre><code></code></pre> 标签会被 Crayon Syntax Highlighter 进行两次高亮处理,导致异常,因为它默认会对 pre 标签也进行高亮。

没有办法,临时看了看 php 的语法,做了如下修改:

在 crayon_wp.class.php 文件中找到如下代码

添加几行代码如下即可解决问题。

这里做的事情是把 pre 标签中的 code 标签全部删掉,这样我们即可勾选 “Capture code as Inline Tag”,问题便全部解决。

同时,这种改法顺带着也解决了另一个问题,即代码块高亮显示会多出一个无用的空行,这也是 pre 和 code 标签嵌套导致的问题,现象如下图。

总体来看,这个解决方案非常暴力,但足够好用,暂时也没发现什么问题,自己没有 php 基础,所以在出现问题之前不打算深究了。

> , < 转义问题

代码中的大小于号会被转成 web 编码的形式,需要在 Crayon Syntax Highlighter 的设置中勾选如下选项。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.