WordPress代码高亮插件WP-Syntax使用及优化

WordPress自带的Code代码显示太弱了，如果代码之前隔一个空白行，就会分开来显示。为此，特地找了个高亮代码显示插件。找了两个插件，一个是WP-Syntax，196793次下载；另外一个是WP-CodeBox，只有94292，最后采用了WP-Syntax。

WP-Syntax确实不错，使用geshi语法引擎，很是方便，但因为没有横向比较，也说不出具体好在哪里。这里就大概介绍下吧：

一、安装

WordPress后台-插件-安装新的插件-搜索“WP-Syntax”，点击安装；或到官方下载，上传至“wp-content/plugins/”内，然后开启。

二、使用

编辑文章时，选择HTML模式下，插入

(pre lang=”LANGUAGE” line=”1“)这里是你要放置的代码。。。(/pre)
（把圆括号换成方括号即可）

其中lang=””内为高亮代码的种类，较常用的有php、css和javascript，当然WP-Syntax可以支持更多，具体如下：

abap, actionscript, actionscript3, ada, apache, applescript, aptsources, asm, asp, autoit, avisynth, bash, bf, blitzbasic, bnf, boo, c, cmac, caddcl, cadlisp, cil, cfdg, cfm, cobol, cpp-qt, cpp, csharp, css, d, dcs, delphi, diff, div, dos, dot, eiffel, email, fortran, freebasic, genero, gettext, glsl, gml, bnuplot, groovy, haskell, hq9plus, html4strict, idl, ini, inno, intercal, io, java, java5, javascript, kixtart, klonec, klonecpp, latex, lisp, locobasic, lolcode lotusformulas, lotusscript, lscript, lsl2, lua, m68k, make, matlab, mirc, modula3, mpasm, mxml, mysql, nsis, oberon2, objc, ocaml-brief, ocaml, oobas, oracle11, oracle8, pascal, per, pic16, pixelbender, perl, php-brief, php, plsql, povray, powershell, progress, prolog, providex, python, qbasic, rails, rebol, reg, robots, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, sql, tcl, teraterm, text, thinbasic, tsql, typoscript, vb, vbnet, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, winbatch, xml, xorg_conf, xpp, z80
注：(LANGUAGE属性，黑体字显示的是比较流行的代码)

line=””是显示行号。比如 line=”1″的意思是从行号1开始显示，可以自己修改起始行号。如果不想显示行号，去掉 line=”1″ 这个属性即可。

三、优化

1、修改默认显示字体：打开“wp-syntax/geshi/geshi.php”，找到如下语句，修改“monospace”为想要的字体：

 
var $overall_style = 'font-family:monospace;';

我修改成

 
var $overall_style = 'font-family:Microsoft Yahei;';

2、修改代码字体的大小。打开 “wp-syntax.css” ，把 “.wp_syntax pre” 里面的 “font-size” 修改为你想要的大小即可。

3、修改某种语言的高亮规则。在 “wp-syntax/geshi/geshi” 里找到你要修改的”语言.php”，可以参考网上教程改哈。

我重新修改了原来的样式，打开“wp-syntax/wp-syntax.css”，原来的清空然后添加：

.wp_syntax {color:#100;background-color:#f9f9f9;margin:0 1em;overflow:auto;} 
.wp_syntax table {border:0px;border-collapse:collapse;} 
.wp_syntax div,.wp_syntax td {border-top:border:0px;padding:0px;vertical-align:top;padding:2px 4px;} 
.wp_syntax .line_numbers {border:0px;text-align:right;background-color:#def;color:gray;overflow:visible;} 
.wp_syntax .code {border:0px;}
.wp_syntax pre {font-size:12px;margin:0;width:auto;float:none;clear:none;overflow:visible;word-wrap:break-word;line-height:1.5;white-space:pre;}

4、在后台添加WP-Syntax代码按键
后台编辑器中添加按钮，可以很方便的插入代码，但是需要修改“wp-includes/js/quicktags.js”。本人没有亲自操作，而且原来作者提供的修改文件过于旧了，毕竟现在WordPress是3.3.2的版本了。具体使用方法及代码详情见 http://ons.me/129.html

5、提高速度
因为WP-Syntax插件”/wp-syntax/geshi/geshi/”文件下含有过多的语言php文件，影响了博客的加载速度，建议保留常用的一些语言，其它都可以去掉即可。

友情提示：WP-Syntax代码高亮的效果必须在代码编辑器里面编辑，粘贴的代码一定要在代码编辑器里面，不要在代码和可视化之间来回切换，因为由“HTML”进入“可视化”部分代码会被WordPress自动转换，这样会出现错误。