这两天一直在写 WordPress 相关文章,里边牵扯到很多代码,以前一直用 Quote 来显示代码,虽然可以显示,不过这样做有一个坏处,如果代码很长的话,代码乱糟糟的。很不容易读代码,对于代码狂人来说,有一个好的编辑器是必不可少的。所以本博客决定安装一个高亮代码显示插件 。

本站已经选择使用了WordPress 高亮代码显示插件 – Codecolorer,以下演示已经不是本文所介绍的 SyntaxHighlighter Evolved ,请各位网友注意下。

在网上看了很多文章,看到 ZACK LIVE 博客中详细介绍了几个高亮插件的优缺点,最后决定用他选择的 SyntaxHighlighter Evolved 插件。

以下是他介绍高亮插件的文章:

刚开始我只用引用(Quote)来显示程式码,随着程式码越来越多,引用已经不够用,我决定要加个程式码高亮显示的插件到WordPress里。

我前后共测试了5个这种插件,包括:

我也总结出,具体的要求:

  1. 不用修改WordPress,包括主题:我不希望因为一个插件而修改WordPress或主题,特别是有其他的选择的情况下。
  2. 显示行数:有行数的话,当讨论程式码时,就比较容易去指定特定一行。关于这一点,WP-Syntax预设是不显示行数的,所以我没有选择它。
  3. 支持可视化编辑器(Visual Editor):这是最严重的问题,有些插件在Visual Editor里会自动重编程式码以便在HTML下显示,这样会破坏原程式码,导致每次编辑时都要改程式码,改到我火都上来。 SyntaxHighlighter Plus,Google Syntax Highlighter for WordPress和Syntax Highlighter for WordPress都有这个问题。

剩下的就是SyntaxHighlighter Evolved,它是唯一不需要作任何改动就符合以上要求,也支持所有常用的程式语言,包括PHP, HTML, CSS, C等。使用上也很简单,只要用[语言]和[/语言]来包住程式码,其中语言是程式码相应的程式语言,如PHP。该插件也有设置页面,可以做一些细节的微 调,也有一些使用说明可以参考。以下是一个带有PHP的HTML范例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>PHP Code Example</title>
</head>
<body>
<h1>PHP Code Example</h1>

<p><?php echo 'Hello World!'; ?></p>

<p>This line is highlighted.</p>

<div>
This    is    an
example    of    smart
tabs.
</div>

<p><a href="http://wordpress.org/">WordPress</a></p>
</body>
</html>

使用方法:
1、安装插件
2、在后台设置自己喜欢的显示方式
3、编写code时候用特殊代码引用(可在 SyntaxHighlighter Evolved 后台查看相关引用代码)
4、另外如果想更简单使用该插件,还需要在HTML编辑器中添加多种按钮,详细教程请进传送门

刚发现 SyntaxHighlighter 的另一大优点,那就是支持多种标签,可以用【php】这种形式,还可以用【code lang="php"】这种形式。甚至还可以用【sourcecode language="php"】这种形式。这样做的好处就是避免了代码运行。就拿这篇文章来说,我贴了半天,老发现引用中的code会自动运行。因为里边的【code lang='js'】和外边的冲突了,结果造成了显示失败。如果换成【js】来显示,那么就完全没有任何问题了。

另外冰剑推荐的 WP-SYNTAX 插件虽然也是可以高亮显示插件,不过不能自动换行。虽然可以在CSS中修改,不过我对CSS极其头疼。所以偷懒就偷懒吧。