WordPress 高亮代码显示插件 - SyntaxHighlighter Evolved

Forece

14 年前

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

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

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

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

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

我前后共测试了5个这种插件，包括：

我也总结出，具体的要求：

不用修改WordPress，包括主题：我不希望因为一个插件而修改WordPress或主题，特别是有其他的选择的情况下。
显示行数：有行数的话，当讨论程式码时，就比较容易去指定特定一行。关于这一点，WP-Syntax预设是不显示行数的，所以我没有选择它。
支持可视化编辑器（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极其头疼。所以偷懒就偷懒吧。

打赏赞