WordPress插件-wp-syntax 给文章插入代码的插件

美工学习

在这个博客里我总是会需要插入各种各样的代码，CSS和JS还好，而html代码会被浏览器认作文档的一部分而解析出来，因此我只能在可视化编辑器里贴上代码，然后再转意成字符，比较麻烦。

今天安装了一款wp-syntax插件，觉得不错，推荐一下，这个插件应该是coder们必备的了。下载地址：http://wordpress.org/plugins/wp-syntax/

安装过程不表，激活完毕后就可以直接用了。还是和以前一样，在文本视图里，把要插入的代码用<pre></pre>包裹起来，要用wp-syntax插件，只需要加一个”lang”属性就好了。具体用法：

1. <pre lang="php" line="1" highlight="3">
   
2. ...
   
3. </pre>

复制代码

参数lang表示要高亮的语言，这个插件支持的语言太多了，常用的CSS/HTML/Javascript/PHP/ASP肯定不在话下；
参数line表示起始的行号，如果没有这个参数，代码框左边就不会显示行号；
参数highlight表示要高亮的行号，高亮的效果就如上面显示。

如果以前的HTML代码已经转意过了，又懒得一个个的去写回来，只要这样写就好了：

1. <pre lang="xml" escaped="true">
   
2. &lt;xml&gt;Hello&lt;/xml&gt;
   
3. </pre>

复制代码

需要注意的是，用这个插件了就尽量不要在可视化和文本视图里面切来切去，否则代码就乱掉了；
每个属性都要加双引号，不能偷懒不加，否则那怕漏掉一个属性的双引号，代码框也会自动降级变成普通的<pre>；
另外在代码里面如果插入HTML代码<pre></pre>，这个标签结束的地方代码块也就结束了，这让我知道到<pre>标签是不能嵌套<pre>的。

这个插件默认显示高亮代码我还是不太满意，就在自己主题的CSS下做了一些修饰

1. /* update code box for wp_syntax*/
   
2. .wp_syntax { border: 1px solid #eee} /*代码框的边框*/
   
3. .wp_syntax td.code { background-size: 1px 44px; background-color: #F9F9F9; } /*代码框的条纹颜色和间距*/
   
4. .wp_syntax pre {
   
5.         font-family: Arial, Helvetica, sans-serif !important;
   
6.         font-size: 13px !important;
   
7.         line-height: 22px !important; /*代码的字体，行高*/
   
8. }
   
9. .wp_syntax pre span { font-weight: normal!important} /*取消了加粗的字体*/
   
10. .wp_syntax td.line_numbers pre {
    
11.         background-color: #FFF !important;
    
12.         width: 20px !important;
    
13.         border-right: 3px solid #21759B!important;
    
14.         font-size: 11px!important /*行号栏的美化*/
    
15. }

复制代码

如果需要自定义代码里面关键字的高亮色，就需要自己到插件安装目录，一般是\wp-content\plugins\wp-syntax\geshi\geshi\ 里面找到要修改的语言，打开自己编辑。我的博客暂时就用默认颜色，但我把heightlight的行背景颜色修改成了蓝色（默认的黄色和我的博客配色不符），修改文件\wp-content\plugins\wp-syntax\geshi\geshi.php，找到

1. var $highlight_extra_lines_style = 'background-color: #ffc;';

复制代码

修改到自己要的颜色即可。这样就可以了非常简单

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！ 如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！