本来是一件很简单的事：上网找一个大家常用流行的代码高亮插件，在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的东西，估计这问题也就不会纠结一天，看来还是要多花时间扩展知识面。