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

这两天把在后台安装了代码高亮的插件——Enlighter，本来是想用代码来实现的，但又懒了点，还是直接采用插件操作吧。毕竟WordPress上插件还是非常成熟的操作了，不用再一个个自己研究那么辛苦。但是启用之后，却发现有些时候OK，有些时候却出现异常，并没有自动高亮代码，初步检查后，发现原来跟前两天加上去的首行缩进2字符代码有所冲突。问题找到后，也针对性做了解决，也简单记录下，方便以后学习。
Enlighter,全名是Enlighter – Customizable Syntax Highlighter。Enlighter是一款免费的、易于使用的、语法突出的插件工具,可以嵌入到后台编辑器，非常的方便与灵活。可以在 Enlighter – Customizable Syntax Highlighter – WordPress plugin | WordPress.org 下载安装。按照正常的操作启用后，并在文章编辑中插入相应的代码，即会自动高亮。

问题描述：
但是一旦当代码随意编辑的情况下，就会在某些情况下完全不起作用了：

原因分析：
这就奇怪了，完完全全同样的代码，同样的插件，同样的操作，却得到完全不一样的呈现。问题会出现什么地方？通过开发者工具查下加载的项目，2个页面加载的是完全一样的资源，EnlighterJS.min.js、mootools-core-yc.js、EnlighterJS.min.css等都是正常200状态的。
那问题会在哪里呢？
既然显示有差异，应该还是后台css文件出了问题，通过检查元素，发现了还真是有点不一样：

真是不比不知道，一比就一目了然了。原来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>，确保是分段的标记才进行替换。
修改后的代码如下：

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

这样就避开了enlighter代码插入的<pre></pre>标记，从而使得插件和代码都正常工作。
这样才算小小的解决了两个插件扩展函数的冲突，避免了失灵的情况。

更多：代码高亮插件Enlighter跟首行缩进代码的冲突 – 程门立学

代码高亮插件Enlighter跟首行缩进代码的冲突​www.iappi.cn