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

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

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

1
2
3

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

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

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

1
2
3

<pre lang="xml" escaped="true">
&lt;xml&gt;Hello&lt;/xml&gt;
</pre>

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

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

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

/* 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，找到

1

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

修改到自己要的颜色即可。

本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/277.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。

本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。
您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。