在Wordpress下，WP-Syntax是一款非常优秀的代码高亮显示插件，它将开源的代码高亮工具GeSHi应用到了Wordpress中。
但WP-Syntax提供的默认样式并不是对于所有WordPress主题都适用的，就像这里现在使用的Unborn主题，那么如何根据自己使用的主题来打造适合自己的代码样式以及配色方案呢？本文将进行一下简要的介绍。
基本样式
WP-Syntax默认使用插件内的wp-syntax.css作为其基本布局样式表。在需要根据主题风格进行改造的时候，只需将默认的wp-content/plugins/wp-syntax/wp-syntax.css文件复制到主题目录再进行改造。当然，你也可以自己在主题目录下新建一个wp-syntax.css文件用于覆盖默认样式。
.wp_syntax元素的background-color定义了整个代码区域的背景色，可以使用在线取色器获取颜色代码。有需要的话也可以将其替换成背景图片。
.wp_syntax .line_numbers元素内可以定义左侧可选的行号区域的样式。
高级自定义样式
因为高亮显示采取的是inline CSS的方式，而且也不会对高亮显示的部分添加class，所以我们不能使用外部样式表来覆盖代码文字的样式。这时，我们需要在function.php中添加如下的代码来自定义代码样式的输出：
|
1 2 3 4 5 6 |
add_action('wp_syntax_init_geshi', 'my_custom_geshi_styles'); function my_custom_geshi_styles(&$geshi) { // We need some customizations here } |
也就是在WP-Syntax在初始化GeSHi的时候，加入我们的代码，修改GeSHi预定义的样式。
在GeSHi的帮助文档中可以看到，可以设置的项有：
- Overall Styles – 总体样式
- Line Number Styles – 行号样式
- Keyword Styles – 关键字样式
- Comment Styles – 注释样式
- Other Styles – 其他
Overall styles将影响所有代码，但会被后面那些样式覆盖。设置方法都差不多，都是调用$geshi->set_[token_type]_style这样的函数来完成。具体函数的用法还是要去看帮助文档，其中参数可能会有$group, $styles, $preserve_defaults等。
$group代表某种类型token的组号或者组标示。看一下wp-content/plugins/wp-syntax/geshi/geshi目录下某种语言相应的PHP文件就可以知道每个$group对应哪些token。拿php.php为例，关键字中$group=1对应’as’, ‘break’, ‘case’等；而$group=2对应’namespace’, ‘new’, ‘private’, ‘public’等；$group=3则对应PHP的内部函数。
$styles是需要设置的CSS样式，常用的只要设置一下颜色就行了。
$preserve_defaults是一个boolean值，表明现在设置的样式是不是要在继承默认样式的基础上进行改动。默认值为false，即重新设置。
下面附上一段我在Unborn主题中使用的配色方案设置代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function my_custom_geshi_styles(&$geshi) { $geshi->set_overall_style('color: #FFF; font-family:"Consolas",monospace,"Courier New"'); $geshi->set_brackets_style('color: #CCC;', true); //括号颜色 $geshi->set_keyword_group_style(1, 'color: #70B9EF;'); //第一组关键字 $geshi->set_keyword_group_style(2, 'color: #996699;'); //第二组关键字 $geshi->set_keyword_group_style(3, 'color: #FFF;'); //第三组关键字 $geshi->set_methods_style(1, 'color: #FFF;'); //第一组方法名称 $geshi->set_comments_style(1, 'color: #999;'); //第一组注释 $geshi->set_comments_style(2, 'color: #33CC66;'); //第二组注释 $geshi->set_comments_style('MULTI', 'color: #999;'); //多行注释 $geshi->set_strings_style('color: #7ACC00;'); //字符串直接量 $geshi->set_strings_style('color: #7ACC00;', false, 'HARD'); //字符串直接量(*) $geshi->set_regexps_style(0, 'color: #7AB9BE;'); //正则表达式 $geshi->set_numbers_style('color: #FFCC00;'); //数字 $geshi->set_symbols_style('color: #CCC;'); //符号 $geshi->set_escape_characters_style('color: #99FF00;'); //转义字符 } |
上面给出的代码中打(*)号的地方需要注意，最新版本的WP-Syntax采用的GeSHi版本号为1.0.8.3。这个版本中，设置字符串直接量的函数为set_strings_style($style[, $preserve_defaults])，也就是没有对字符串直接量的类别进行指定，事实上在语言文件如php.php中，含有标示为”HARDQUOTE”的一组字符串直接量，对应于用单引号包围的字符串直接量，这些代码就无法使用set_strings_style来设置其样式。我本来想能够在不改动WP-Syntax代码的情况下对代码样式进行完美配置，现在看来是无法达成了。最终GeSHi的BenBE给我的回复和我想象的一样，需要修改geshi.php文件中的set_strings_style函数。在该文件中搜索这个函数名并将下面这段代码覆盖原来的函数，即可像我上面给出的配置那样修改这类代码的样式。
|
1 2 3 4 5 6 7 |
function set_strings_style($style, $preserve_defaults = false, $group = 0) { if (!$preserve_defaults) { $this->language_data['STYLES']['STRINGS'][$group] = $style; } else { $this->language_data['STYLES']['STRINGS'][$group] .= $style; } } |
BenBe说GeSHi近期将会有一个新的release，将解决上面这类问题。如果WP-Syntax届时跟进的话我们就可以不用改动插件代码来进行完美设置了。
适合白色风格的配色方案
修改wp-syntax/wp-syntax.php文件，在122行插入下面内容。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$geshi->set_overall_style('color: #000000; font-family:"Consolas",monospace,"Courier New"'); //默认颜色 $geshi->set_brackets_style('color:#CCB;background-color:#F0F0F0', true); //括号颜色 $geshi->set_keyword_group_style(1, 'color: #9400D3;font-weight: bold;'); //第一组关键字 new public class $geshi->set_keyword_group_style(2, 'color: #DC143C;'); //第二组关键字 true $geshi->set_keyword_group_style(3, 'color: #436EEE;'); //第三组关键字 Object ThreadLocal $geshi->set_methods_style(1, 'color: #B8860B;'); //第一组方法名称 $geshi->set_comments_style(1, 'color: #777777;'); //第一组注释 $geshi->set_comments_style(2, 'color: #33CC66;'); //第二组注释 $geshi->set_comments_style('MULTI', 'color: #008B45;'); //多行注释 $geshi->set_strings_style('color: #00CD00;'); //字符串直接量 $geshi->set_strings_style('color: #00CD00;', false, 'HARD'); //字符串直接量(*) $geshi->set_regexps_style(0, 'color: #000088;'); //正则表达式 $geshi->set_numbers_style('color: #A52A2A;'); //数字 $geshi->set_symbols_style('color: #4A708B;'); //符号 $geshi->set_escape_characters_style('color: #99FF00;'); //转义字符 |