子曰： 工欲善其事，必先利其器。作为码农一枚，再加上站长这个已经不再光鲜的称呼，岂能没有一款经济实用、操作简单、而且功能必须强大、样式也必须好看的Wordpress代码高亮插件？！作为一个视代码如生命的码农，把代码整的漂漂亮亮是一件多么神圣和伟大的事情啊！

今天就给大家推荐一款这样的代码高亮插件：SyntaxHighlighter Evolved。相信我， 功这款插件能强足够大、并且简单易用，绝对值得推荐。本站就是用的这款插件，大家可以看看“生病的JavaScript代码”，这就是最好的例子。

 

插件名称：SyntaxHighlighter Evolved

插件作者：Viper007Bond, automattic

作者主页：http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/

插件类型：代码高亮

中文支持：支持

安装环境：WordPress2.7或以上版本，经过我自己的测试，在3.3和3.4上都可以正常运行

下载地址：syntaxhighlighter

SyntaxHighlighter Evolved基于开源的JS核心库：

SyntaxHighlighter JavaScript package by Alex Gorbatchev二次开发扩展的。

安装后只需简单设置一下，不用修改任何代码即可达到很好的效果。

 

功能特效

说起SyntaxHighlighter Evolved的特效，忍不住要“炫耀”一下。

不说不足以让你感受到SyntaxHighlighter Evolved的强悍功能。SyntaxHighlighter Evolved的功能特效如下：

  1. 代码高亮
  2. 支持Eclips、Emacs等多种样式，可搭配不同风格的主题
  3. 特色——显示工具条。右上角显示工具条，可以”查看源代码”、”复制源代码”、”打印源代码”。（只有第2版支持）
  4. 显示行号
  5. 长代码自动换行（只有第2版支持）
  6. 可以点击代码中的超文本链接
  7. 可以收缩代码框
  8. 高亮显示模式—某一行高亮
  9. 设置开始行号
  10. 自定义样式

 

特效演示

只要做Web应用的，无论是JSP，还是PHP,甚至ASP.NET，都会用JavaScript代码。所以，就是用JavaScript代码来演示SyntaxHighlighter的功能吧。要实现的功能是计算第N个斐波纳契数列（Fibonacci Sequence）数列的值。同时，我们要求文件名显示为：FibonacciSequence.js；代码的第二行高亮显示。则实例如下： 

function fib(n) {
    return n<2 ? n : fib(n-1) + fib(n-2);
}

怎么样，你是不是已经被SyntaxHighlighter强大功能震撼了？也许你已经好奇，这是如何实现的？我们接下来就介绍SyntaxHighlighter的使用方法。

 

安装方法

只需要在后台插件里搜索“SyntaxHighlighter Evolved”之后点击安装，启用即可。

使用方法

使用方法很简单。在发布文章时，在“HTML”编辑模式下（注意：不是CKEditor等富文本编辑模式；防止让这些富文本编辑器把代码转义了。），使用如下代码，把需要展示的代码包含起来即可：（注意：把前面的@符号去掉。）

  1. [@java]这里写你的代码[/java]
  2. [@css autolinks="false" classname="myclass" collapse="false" firstline="1" gutter="true" highlight="1-3,6,9" htmlscript="false" light="false" padlinenumbers="false" smarttabs="true" tabsize="4" toolbar="true" title="example-filename.php"]这里写你的代码[/css]
  3. [@code lang="js"]这里写你的代码[/code]
  4. [@sourcecode language="plain"]这里写你的代码[/sourcecode]
  5. 推荐使用这种方式。这种使用方式，见"最佳实践"

其实，在网上，搜“SyntaxHighlighter 使用方法”就会出现一堆结果，里面大多时对于这些使用方法的罗列。很少去讲解这些配置项的意思和说明。下面，我将针对这些配置进行详细说明。同时，针对这些配置的使用，我总结了SyntaxHighlighter使用方法的最佳实践。如果急于知道结果，可以直接查看“最佳实践”。

 

配置详解

表-1-SyntaxHighlighter配置参数表
简码 默认值 含义说明 V2支持 V3支持
lang 无 说明代码块是哪种语言？ 支持 支持
autolinks true Toggle automatic URL linking. 是否自动将网址转换为链接。 默认转换。可以后台管理页面修改默认值。 示例：点击查看 支持 支持
classname 无 Add an additional CSS class to the code box. 允许你添加一个或多个自定义的样式。 默认没有。可以后台管理页面修改默认值。示例：点击查看 支持 支持
collapse   Toggle collapsing the code box by default, requiring a click to expand it. Good for large code posts. 是否默认折叠代码段。如果折叠，这需要一个“点击”操作，才能展开。非常适合有大段代码的文章。默认不折叠。可以后台管理页面修改默认值。 示例：点击查看 支持 支持
firstline 1 An interger specifying what number the first line should be (for the line numbering). 设置起始行的行号。示例：点击查看 支持 支持
gutter   Toggle the left-side line numbering. 是否显示行号。默认显示。可以后台管理页面修改默认值。 示例：点击查看 支持 支持
highlight 无 A comma-sperated list of line numbers to highlight. You can also specify a range. Example: 2,5-10,12 需要高亮显示并使用逗号分隔的行号。同时，也支持区间（开始行号-结束行号）。例如：2,5-10,12。 示例：点击查看 支持 支持
htmlscript   Toggle highlighting any extra HTML/XML. Good for when you're mixing HTML/XML with another language, such as having PHP inside an HTML web page. The above preview has it enabled for example. This only works with certain languages. 是否高亮显示功能任何额外的HTML / XML。特别适合混合HTML/XML与另一种语言混合的情况下。如在HTML代码中含有部分PHP代码。注意，这仅仅适用于特定的语言。示例：点击查看 支持 支持
light false  Toggle light mode which disables the gutter and toolbar all at once. 是否显示高亮模式。默认是关闭。可以后台管理页面修改默认值。    
padlinenumbers off Controls line number padding. 设置行号的格式化，前面是否补零。默认是关闭。可以后台管理页面修改默认值。 支持 支持
title 无 Sets some text to show up before the code. 设置文本的标题。默认没有。可以后台管理页面修改默认值。 不支持 支持
toolbar false  Toggle the toolbar (buttons in v2, the about question mark in v3) 默认不显示。可以后台管理页面修改默认值。 示例：点击查看 支持 不支持
wraplines false Toggle line wrapping. 是否开启自动换行。可以后台管理页面修改默认值。 支持 不支持
smarttabs true Allows you to turn smart tabs feature on and off. Click here for a demo.智能制表符 支持 不支持
tabsize 4 Allows you to adjust tab size. Click here for a demo.制表符的长度。 支持 不支持

 

颜色主题

目前IT行业中，常用的语言有几十种；使用的开发环境也多种多样，比如开发Java的也许用Eclipse的比较多；但是在Linux下做C/C++开发的也许用Emacs等。见过这些开发环境的人都知道，这些开发环境的高亮模式、颜色等都是不一样的。习惯了Eclipse的人很难适应Emacs；反之亦然。SyntaxHighlighter考虑的很周全，她在内部直接继承了大概其中这样的颜色主题来供大家选择。大家可以在后台的管理页面轻松的选择自己喜欢的“颜色主题”来进行显示。“颜色主题”列表如下：（排名部分前后。呵呵）

  • Default
  • Django
  • Eclipse
  • Emacs
  • Fade to Grey
  • Midnight
  • RDark
  • None

语言别名

从事IT行业的朋友也许都知道，由于历史等原因，一个语言可能有好几个名字。比如JavaScript，微软山寨了个JScript；后来经过ECMA标准化之后，名字又称了ECMAScript；我们大家平时还简称成JS。这就给我们在使用SyntaxHighlighter的语言代号时，造成了一定的困难：不知道到底该用哪个名字才是“正确”的。

其实，这点SyntaxHighlighter也考虑到了。她通过“语言别名”的方式很好的解决了这个问题。

表-2-SyntaxHighlighter中“语言别名”和“语言代码”对应表
语言别名 语言代码 说明
as3 as3 不知道是否支持AS2？
actionscript3 as3
bash bash 竟然还支持Shell.
shell bash
coldfusion coldfusion  
cf coldfusion
clojure clojure  
clj clojure  
cpp cpp  
c cpp  
c-sharp csharp  
csharp csharp
css css  
delphi delphi 看来Delphi和Pascal确实有一腿啊！
pas delphi
pascal delphi
diff diff  
patch diff  
erl erlang  
erlang erlang  
fsharp fsharp  
groovy groovy  
java java  
jfx javafx  
javafx javafx
js jscript 从这里可以看出，针对JavaScript的代码，写js行，写javascript行，甚至是微软的jscript都行。
jscript jscript
javascript jscript
latex latex Not used as a shortcode
tex latex  
matlab matlabkey  
objc objc  
obj-c objc
perl perl  
pl perl
php php  
plain plain  
text plain  
ps powershell  
powershell powershell
py python  
python python
r r Not used as a shortcode
splus r  
rails ruby 针对Ruby的。
rb ruby
ror ruby
ruby ruby
scala scala  
sql sql  
vb vb  
vbnet vb
xml xml 针对XML、HTML以及XHTML等，其实都是按照XML来处理的
xhtml xml
xslt xml
html xml
xhtml xml

从这个表中，我们也可以看出SyntaxHighlighter支持的编程语言多达二十五种语言：AppleScript、 ActionScript、 Bash、 ColdFusion、 C /C++、 C#、 CSS、 Delphi、 Diff（不知道这是不是一种编程语言）、 Erlang、 Groovy、 Java、 JavaFX、 JavaScript、 Perl、 PHP、 PowerShell、 Python、 Ruby、 Sass、 Scala、 SQL、 VB、 XML。

 

最佳实践

经过配置的讲解，我们可以明白，SyntaxHighlighter已经遵循了软件工程中的最佳实践“约定大于配置”。其实，我们并不需要过多地去设定SyntaxHighlighter的配置，只需要设定一些“实在没办法约定”的配置项即可。比如：title、highlight等。另外，经过我自己的实际测试，我还发现了第五种使用方法，其实，我们可以在[代码名称]这个标签中，添加刚刚讲到的配置配置项。当然，lang就没必要了。因为这里已经通过“标签名”指定过了。综上所述，SyntaxHighlighter使用方法的最佳实践如下：（下面以Java代码为例）

[@java title="自定义的文件名" highlight="高亮的行"]　这里写你的代码　[/java]

有时，我们并不需要一定有高亮强调的行，这是highlight就可以省略掉。另外，如果你需要自定义样式，可以添加class属性。不过，我个人觉得必要性不大。

 

特效扩展

大家在 "生病的JavaScript代码" 也许会发现高亮部分的背景颜色比较深，也许有一些人看着不舒服（我个人就觉得颜色有点深）。也许就有人想修改高亮行的背景色。这是，就可以通过修改插件自带的CSS文件，来实现自定义样式的功能。

在线操作方式是：登录Wordpress后台管理页面，插件-编辑-选择SyntaxHighlighter-选择syntaxhighlighter/syntaxhighlighter2/styles/shThemeDefault.css-找到 

.syntaxhighlighter .line.highlighted.alt1,
.syntaxhighlighter .line.highlighted.alt2
{
    background-color: #e0e0e0 !important;
}

将其修改为： 

.syntaxhighlighter .line.highlighted.alt1,
.syntaxhighlighter .line.highlighted.alt2
{
    background-color: #6CE26C !important;
}

 

重起见，D瓜哥不建议做这个修改。如果以后修改“颜色主题”可能会带来一点的不良影响。

SyntaxHighlighter的“容器”样式是一个方方正正。也许不如圆角、立体阴影效果漂亮。这个效果也很容易实现。只需要修改syntaxhighlighter的样式即可；不过，这个修改是在主题的style.css文件做的。修改方式如下：将以下代码添加到主题的style.css文件里面： 

.syntaxhighlighter{
     padding: 10px 0 !important;
     box-shadow: 1px 1px 3px #ccc;
    -webkit-box-shadow: 1px 1px 3px #ccc;
    -moz-box-shadow: 1px 1px 3px #ccc;
    border-radius: 5px;
   -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
 }

 

设置背景样式

实现圆角和阴影

 

 

参考资料：

WordPress代码高亮插件SyntaxHighlighter终极使用详解

代码高亮插件SyntaxHighlighter Evolved的使用方法

WordPress代码高亮插件SyntaxHighlighter Evolved

SyntaxHighlighter配置详解B SyntaxHighlighter.defaults

SYNTAXHIGHLIGHTER配置详解

维基百科中关于“斐波那契数列”的介绍