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

在这个博客里我总是会需要插入各种各样的代码,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 本站记录了近几年的工作中遇到的一些技术问题和解决过程,“作品集”还收录了本人的大部分作品展示。除了本博客外,我们的工作室网站 – JennyStudio,内有更多作品回顾和展示。
您也可以扫描左边的二维码,关注我们的微信公众号,在微信上查看我们的案例。

发表评论

电子邮件地址不会被公开。 必填项已用*标注