代码高亮插件Enlighter跟首行缩进代码的冲突

这两天把在后台安装了代码高亮的插件——Enlighter,本来是想用代码来实现的,但又懒了点,还是直接采用插件操作吧。毕竟WordPress上插件还是非常成熟的操作了,不用再一个个自己研究那么辛苦。但是启用之后,却发现有些时候OK,有些时候却出现异常,并没有自动高亮代码,初步检查后,发现原来跟前两天加上去的首行缩进2字符代码有所冲突。问题找到后,也针对性做了解决,也简单记录下,方便以后学习。

Enlighter,全名是Enlighter – Customizable Syntax Highlighter。Enlighter是一款免费的、易于使用的、语法突出的插件工具,可以嵌入到后台编辑器,非常的方便与灵活。可以在 Enlighter – Customizable Syntax Highlighter – WordPress plugin | WordPress.org 下载安装。按照正常的操作启用后,并在文章编辑中插入相应的代码,即会自动高亮。

图1.插入代码自动高亮的情况

问题描述:

但是一旦当代码随意编辑的情况下,就会在某些情况下完全不起作用了:

图2.完全没有作用的前端网页显示

原因分析:

这就奇怪了,完完全全同样的代码,同样的插件,同样的操作,却得到完全不一样的呈现。问题会出现什么地方?通过开发者工具查下加载的项目,2个页面加载的是完全一样的资源,EnlighterJS.min.js、mootools-core-yc.js、EnlighterJS.min.css等都是正常200状态的。

那问题会在哪里呢?

既然显示有差异,应该还是后台css文件出了问题,通过检查元素,发现了还真是有点不一样:

图3.正常显示高亮源代码的页面的元素
图4.不正常显示高亮源代码的页面的元素

真是不比不知道,一比就一目了然了。原来enlighter插件正常都是会创建一个EnlighterJSRAW的类,然后使用了如下的语句:

<pre class="EnlighterJSRAW" style="display: none;" data-enlighter-language="php" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""></pre>

这种情况下就会正常调用相应的资源,正常将代码高亮。但不正常显示的情况下,代码是这样的:

p style=”text-indent:2em;” re class=”EnlighterJSRAW” data-enlighter-language=”php”

这代码一看就知道是前两天在WordPress文章页段落首行缩进2字符的处理 中操作加入的了,自动首行缩进的关键代码是:

$return = str_replace('<p', '<p style="text-indent:2em;"',$text);

这段代码的意思是,将<p的代码全部替换成

<p style="text-indent:2em; 

以确保在文章中,首行会缩进2个字符,当时也是正常的。但现在enlighter这个插件,也会在前端代码中插入<pre></pre>的代码,而刚好符合了<pre>的条件,自然就把它全部替换走了。那enlighter插件的代码就变成了

<p style="text-indent:2em;” re class="EnlighterJSRAW" data-enlighter-language="php"

这样的不伦不类。自然就没有相应的效果了。

解决方案:

既然找到了原因,那解决起来也简单了,就是将首行缩进代码的判断条件修正了一下,将原来的<p改成<p>,确保是分段的标记才进行替换。

修改后的代码如下:

$return = str_replace('<p>', '<p style="text-indent:2em;">',$text);

这样就避开了enlighter代码插入的<pre></pre>标记,从而使得插件和代码都正常工作。

这样才算小小的解决了两个插件扩展函数的冲突,避免了失灵的情况。