吉欧塔

以前挑选js高亮插件写了篇博文：WP高亮插件选择：Syntax Highlighter还是WP-Syntax

之前的选择是：Syntax Highlighter
原因是它功能强大，[lang-name]的方式和我的zBench主题样式冲突（<pre><table>标签的样式都有冲突）
图就不给了，已经改掉了。

还有个问题就是Syntax Highlighter在编辑器的富文本模式和源码模式切换时，会造成代码缩进丢失，这个影响可读性，很严重！
当我今天之前一直忍了，因为我一直用源码模式编辑，也没啥问题，嘿嘿~
但是，现在要给团队装高亮插件了，重新权衡，还是选用了WP-Syntax，它首先在切换编辑器时不会丢失缩进，且<pre>的方式或许更加通用。至于CSS的冲突，2分钟就调好了。嘿嘿，速记如下：

zBench样式文件style.css中，直接把pre的定义注释掉吧，交给WP-Syntax控制：

1
2
3
4
5
6
7
8
9
10
11
12

.entry pre{
    overflow:auto;width:95%;
    line-height:16px;
    margin:0 0 20px;
    padding:0 5px 16px;
    color:#555;
    font-family:"Courier New",FixedSys;
    font-size:12px;
    background:#fafafa;
    border:1px solid #ccc;
    border-left:15px solid #ccc;
}

WP-Syntax样式文件wp-syntax.css中，增加2句关于table、td的定义，覆盖zBench的定义：

1
2
3
4
5
6
7
8
9

.wp_syntax table {border: none;  margin:0; }
.wp_syntax td { border: none;}
.wp_syntax {
    background-color: #F9F9F9; /* 改为 #fff 白色*/
    border: 1px solid silver;
    color: #110000;
    margin: 0 0 1.5em;
    overflow: auto;
}

就搞定了！上面可以看到效果！

另外，结合WP-Syntax Editor Integration Plugin，会在wp原生编辑器上增加一个添加代码的按钮，那就更方便了！

再另外，<pre>的通用很重要，这样很多插件，甚至没插件都能支持，[lang-name]就鸡肋了，只有它一个插件支持，用来就不能换，否则，以前的文章要一篇篇改，我还好，就几篇，十几分钟就改完了。但是，我肯定不愿再意重新改一次了! 

再再另外，WP-Syntax有个不足，不支持某行高亮，不过这个用的不多，增加支持也不难，先不管了！还有，据不完全统计，WP-Syntax支持136种脚本！