WP高亮插件wp-syntax与Mantra主题冲突解决小记

昨天计划着在博客上发几篇以前整理的技术文章,在整理时发现有不少代码片段,想起以前看别人的博客时文中代码的高亮显示,以及开源中国中的代码片段插入,觉着wordpress中肯定也能实现这样的功能,于是就整这个功能到现在。实现后的效果:

本来是一件很简单的事:上网找一个大家常用流行的代码高亮插件,在wordpress中搜索到该插件,安装好,然后上网熟悉一下使用方法,一切就OK了的。如果一切顺利30分钟就可以结束这次需求。

  1. 百度“wordpress语法高亮插件”,一大堆的博客文章推荐介绍相关的方法和插件的,我看了一下这篇文章:wordpress代码高亮插件指南,大概对常用的插件及其特点有了个了解,然后做了和作者一样的选择:Syntax Highlighter and Code Colorizer for WordPress 。
  2. wordpress后台中选择插件,安装插件,搜索到该插件,安装后启用,这个没什么问题。
  3. 找使用方法,由于该插件已经两年没有更新了,链接老半天才能打开,也没找到官方的guidelines,只好继续百度。方法都很简单,就下面一句话:
    <pre class="brush:name">...your code...</pre>

    使用时把上面的name替换成你的代码类型名,如:shell,c,c++,java,php等,注意小写,把代码放在“…your code…”的位置。我跟着照办,以为是结束,却是问题的开始。

大部分人在完成上面的三步后应该就可以得到我上面的高亮效果了,如果有朋友做完上面三步后测试看到了和我下面相似的结果,那可以参考一下我的解决过程,我做完后测试得到的结果:

很让人无语的效果。由于是wordpress的新手,对插件不熟,同时对php、CSS、html等也不懂,一下子就蒙了。怀疑出问题的原因有:插件与3.4版不兼容、插件本身有问题、相关的设置有问题等,于是我又重新百度新的插件、该插件更详细的使用方法,结果还是不行。我还新安装了个WP SyntaxHighlighter的插件,问题还是一样。

正在一筹莫展时,想起之前测试用的xampp平台,刚好可以在localhost上试试这些插件。结果一试还真就没问题,一对比发现区别在于主题:localhost上使用的是自带的Twenty-eleven主题,个人博客上是我安装的Mantra主题。问题根源出来了:主题和插件有冲突。好吧,第一想法换主题,重新安装了个Green One的主题,安装后测试没问题。不过它的字太小了,字体我也不喜欢,那就修改样式文件吧,又百度了一个小时左右,知道了style.css文件,和一些css的属性,结果不如人意。还是喜欢Mantra的主题,设置方面,有专门的settings界面。重新换回Mantra主题,第二方法,解决到主题和插件的冲突,继续百度。

找到一篇相关的博文:WP高亮插件WP-Syntax与zBench样式的冲突解决小记,不过和我的主题不一样。参考文中提供的方法,修改style.css,可是我没有找到wp-syntax.css文件,只找到了一个pre.css文件,只能参照着改。结果还是不行,依然没有解决掉。没有办法,参照文中作者的思路,我找到主题中所有的CSS文件,把其中的table、td元素相关的属性都注释掉,试了一下,还是不行。

在打算放弃这个主题时,我想到了最后一个方法:对比Twenty-eleven主题和Mantra主题的style.css文件,一点一点代码的排除。因为这两个文件肯定有很大的差异,这几乎就是蛮力,死马当活马医了。很快我就找到了问题代码:

.entry-content code {
 background-color: #FAFAFA;
 border-left: 5px solid #EEEEEE;
 clear: both;
 color: #1B1B1B;
 display: block;
 float: none;
 margin: 0 auto;
 overflow: auto;
 padding: 10px !important;
 text-indent: 0;
 white-space: nowrap;
 width: 95% !important;
 }

继续排除,确定了是display和overflow这两个属性的设置导致的,百度CSS中这两个属性值的含义:display 属性规定元素应该生成的框的类型;overflow 属性规定当内容溢出元素框时发生的事情,看了一下可以设置的属性值,改成:display:inline;overflow:visible;后,问题解决了。

最后我选择了WP SyntaxHighlighter插件,原因是它有对应的属性设置功能,可以自己进行调整,而Syntax Highlighter and Code Colorizer for WordPress 没有。

就这么个小功能浪费了我难得的一个星期六休息天,真是隔行如隔山,要是懂点CSS的东西,估计这问题也就不会纠结一天,看来还是要多花时间扩展知识面。

Tagged , . Bookmark the permalink.

发表评论

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

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">