在WordPress里使用Markdown和语法高亮

本来一直都是用富文本编辑器的,在朋友的强烈推荐下试用了简书,结果特么我再也不想碰富文本编辑器了!
而且好歹是半个程序员,博客没有语法高亮怎么能忍?
百度一下看到都说JP Markdown + Crayon Syntax Highlighter的组合好用,装好插件一试,是挺好用的。
然而bug也好多啊…

首先当然是安装这两个插件了,直接在 wordpress 插件库里搜索 JP MarkdownCrayon Syntax Highlighter 并安装就行。
还有个 WP Markdown Editor 听说也不错,试用了一下,自带实时预览比 JP Markdown 好不少,只是有个bug,使用快速编辑的时候会把md格式转成 html格式,之后编辑就不是md格式的文本了,其他方面跟 JP Markdown 没差,听说就是用 JP Markdown 的内核。

然后启用这两个服务,就可以在 wordpress 里使用 markdown 和语法高亮了,好简单是不?
要注意的是要在 Crayon Syntax Highlighter 的设置里把捕获 `反引号` 为 <code> 标签前面的勾去掉,不然会和 JP Markdown 冲突。

还有两个转义也必须勾上,不然代码里会出现一堆&lt&gt之类的

不过很快我就发现一个问题,不知道为什么代码多了一行空行。

然后我禁用了 Crayon Syntax Highlighter,刷新页面发现排版是没有问题的,也就是说多半是 Crayon Syntax Highlighter 的问题。
在F12里看了下,发现</code>并不是紧贴在最后一行代码后面,而是另起一行结尾的,估计是 Crayon Syntax Highlighter 把它当成一行代码了。

之后我尝试改wp-content\plugins\crayon-syntax-highlighter里的文件,在crayon_wp.class.php里找到了匹配<pre></pre>的正则。

尝试修改这段代码几次之后,我也没找到很好的解决方法,最后在这段代码上面加了一段代码用来匹配<pre><code></code></pre>

1
2
3
4
5
6
7
// 用JP Markdown处理过的代码块最后有一个空行:<pre><code>'code'\r\n</code></pre>
// 我这里加了一段单独处理的,没办法,我也不知道怎么改才能完美解决问题。
// 其实就是把下面那段处理<pre>的复制了一份上来加了个<code>处理<pre><code></code></pre>
if ((CrayonGlobalSettings::val(CrayonSettings::CAPTURE_PRE) || $skip_setting_check) && $in_flag[CrayonSettings::CAPTURE_PRE]) {
// XXX This will fail if <pre></pre> is used inside another <pre></pre>
$wp_content = preg_replace_callback('#(?<!\$)<\s*pre(?=(?:([^>]*)\bclass\s*=\s*(["\'])(.*?)\2([^>]*))?)([^>]*)><code[^>]*>(.*?)</code><\s*/\s*pre\s*>#msi', 'CrayonWP::pre_tag', $wp_content);
}

不错,这下没有空行了。虽然不能算完美解决问题,而且每次更新插件都要重新写一次也是挺麻烦的,不过勉强算是能用的方法。


这两插件bug多得要死,仔细看上面的图还能发现上面的有序列表被代码段拆开了,然后上面的代码段因为各种冲突我只能放弃使用代码段显示,想要完美解决这个问题估计要重写插件,算了我放弃了,先将就着用吧。