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

google-code-prettify-javascript-syntax-highlighter

使用 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 文件中。