WordPress 使用 Google Code Prettify 高亮代码

Google Code Prettify 是 Google 开源的一个用于代码高亮的 Javascript 库，支持 C/C++, Java, Python, Ruby, PHP，Javascript 等等常见语言，目前包括 Google Code、Stackoverflow.com 在内的很多网站都在使用它。最吸引人的是，在使用它进行代码高亮时，甚至不需要指明语言类型，Prettify 会自动判断并处理。

使用 Prettify 一般只需要包含两个文件：prettify.js 和 prettify.css，压缩过后的 prettify.js 大小差不多在 15K 左右，非常小巧。

简单使用

在网站页面中引用 Prettify文件：

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

同时增加以下代码，让页面加载完成时执行 Prettify：

<script type="text/javascript">
window.onload = function(){prettyPrint();};
</script>

Prettify 会在网页中查找<pre class="prettyprint">...</pre>或者<code class="prettyprint">...</code>包围的代码片断，对它们进行高亮。

下面是一个简单的例子：

<pre class="prettyprint">
import os

def getcwd():
    return os.getcwd()
</pre>

更多详细的用法可以看 Prettify 的 Readme 页面。

WordPress 集成 Prettify

之前我一直通过插件的形式来使用 Prettify，Wordpress 上这种类型的插件很多，例如WP Code Prettify。安装插件的好处是省力，不需要折腾，但是不好的地方是插件往往会引入些额外的 CSS 和 JS 文件。

所以在制作 dangopress 主题的时候我就希望把代码高亮的功能集成到主题中，而不是再额外通过插件来实现（其实我一直希望有一款给程序员专用的主题，但是貌似没找到）。看了下市面上的几个高亮插件，核心的功能其实就几行代码，移植过来也非难事。

首先，将以下代码拷贝到主题的 functions.php 文件中：

/* 
 * Escape special characters in pre.prettyprint into their HTML entities
 */
function dangopress_esc_html($content)
{
    $regex = '/(<pre\s+[^>]*?class\s*?=\s*?[",\'].*?prettyprint.*?[",\'].*?>)(.*?)(<\/pre>)/sim';
    return preg_replace_callback($regex, dangopress_esc_callback, $content);
}

function dangopress_esc_callback($matches)
{
    $tag_open = $matches[1];
    $content = $matches[2];
    $tag_close = $matches[3];

    //$content = htmlspecialchars($content, ENT_NOQUOTES, get_bloginfo('charset'));
    $content = esc_html($content);

    return $tag_open . $content . $tag_close;
}
add_filter('the_content', 'dangopress_esc_html', 2);
add_filter('comment_text', 'dangopress_esc_html', 2);

function setup_load_script()
{
    // Register prettify.js
    wp_enqueue_script('prettify-js', $url_prefix . '/scripts/prettify.min.js',
                       array(), '20130504', true);
}
add_action('wp_enqueue_scripts', 'setup_load_script');

这段代码的核心功能是将<pre class="prettyprint">...</pre>标签中的特殊字符，例如'<'，'>'，转换成对应的HTML 字符实体，以便代码正确地输出。然后，在页面载入的时候加载 prettify.min.js 脚本。

有同学会问，不是还要加上window.onload = function(){prettyPrint();};吗？哈，为了简单起见，我已经把这句加到 prettify.min.js 的最后面了，具体可以看未压缩前的版本 prettify.js。除此之外，我还将 lang-css.js 的内容也集成到 prettify.js 里面了，能少加载一个文件就是一个文件。

最后你可以在这里或者这里，挑选一款合适的高亮主题样式，然后加到你主题的 style.css 文件中。