WordPress插件-wp-syntax 给文章插入代码的插件
在这个博客里我总是会需要插入各种各样的代码，CSS和JS还好，而HTML代码会被浏览器认作文档的一部分而解析出来，因此我只能在可视化编辑器里贴上代码，然后再转意成字符，比较麻烦。今天安装了一款wp-syntax插件，觉得不错，推荐一下，这个插件应该是coder们必备的了。下载地址：http://wordpress.org/plugins/wp-syntax/安装过程不表，激活完毕后就可以直接用了。还是和以前一样，在文本视图里，把要插入的代码用<pre></pre>包裹起来，要用wp-syntax插件，只需要加一个”lang”属性就好了。具体用法：<pre lang="php" line="1" highlight="3">...
</pre>参数lang表示要高亮的语言，这个插件支持的语言太多了，常用的CSS/HTML/Javascript/PHP/ASP肯定不在话下；
参数line表示起始的行号，如果没有这个参数，代码框左边就不会显示行号；
参数highlight表示要高亮的行号，高亮的效果就如上面显示。如果以前的HTML代码已经转意过了，又懒得一个个的去写回来，只要这样写就好了：<pre lang="xml" escaped="true">
<xml>Hello</xml>
</pre>需要注意的是，用这个插件了就尽量不要在可视化和文本视图里面切来切去，否则代码就乱掉了；
每个属性都要加双引号，不能偷懒不加，否则那怕漏掉一个属性的双引号，代码框也会自动降级变成普通的<pre>；
另外在代码里面如果插入HTML代码<pre></pre>，这个标签结束的地方代码块也就结束了，这让我知道到<pre>标签是不能嵌套<pre>的。这个插件默认显示高亮代码我还是不太满意，就在自己主题的CSS下做了一些修饰/* update code box for wp_syntax*/
.wp_syntax { border: 1px solid #eee} /*代码框的边框*/
.wp_syntax td.code { background-size: 1px 44px; background-color: #F9F9F9; } /*代码框的条纹颜色和间距*/
.wp_syntax pre {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 13px !important;
line-height: 22px !important; /*代码的字体，行高*/
}
.wp_syntax pre span { font-weight: normal!important} /*取消了加粗的字体*/
.wp_syntax td.line_numbers pre {
background-color: #FFF !important;
width: 20px !important;
border-right: 3px solid #21759B!important;
font-size: 11px!important /*行号栏的美化*/
}如果需要自定义代码里面关键字的高亮色，就需要自己到插件安装目录，一般是\wp-content\plugins\wp-syntax\geshi\geshi\ 里面找到要修改的语言，打开自己编辑。我的博客暂时就用默认颜色，但我把heightlight的行背景颜色修改成了蓝色（默认的黄色和我的博客配色不符），修改文件\wp-content\plugins\wp-syntax\geshi\geshi.php，找到var $highlight_extra_lines_style = 'background-color: #ffc;';修改到自己要的颜色即可。这样就可以了非常简单
页:
[1]