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

转载请注明转自: 团子的小窝 , 本文固定链接: WordPress 使用 Google Code Prettify 高亮代码

  1. m0ver's avatar
    m0ver 发表于 2017-10-26 3:10:44 回复 #1

    请问博主集成进dangopress主题的代码高亮插件都支持哪些编程语言?(我看到当前页面只有lang-bash)

    • kodango's avatar
      发表于 2017-10-30 3:52:56 回复

      @m0ver:参考:https://github.com/google/code-prettify

      The comments in prettify.js are authoritative but the lexer should work on a number of languages including C and friends, Java, Python, Bash, SQL, HTML, XML, CSS, JavaScript, Makefile, and Rust.
      
      It works passably on Ruby, PHP, VB, and Awk and a decent subset of Perl and Ruby, but because of commenting conventions, doesn't work on Smalltalk, OCaml, etc. without a language extension.
      
      Other languages are supported via extensions:
      
      Apollo; Basic; Clojure; CSS; Dart; Erlang; Go; Haskell; Lasso; Lisp, Scheme; LLVM; Logtalk; Lua; MATLAB; MLs: F#, Ocaml,SML; Mumps; Nemerle; Pascal; Protocol buffers; R, S; RD; Rust; Scala; SQL; Swift; TCL; LaTeX; Visual Basic; VHDL; Wiki; XQ; YAML
      
    • kodango's avatar
      发表于 2017-10-30 3:54:50 回复

      @m0ver:常见的语音应该都支持的,不过主题里面默认用的版本不是最新的,但是应该差别不大。如果需要,可以更新。

  2. 歪麦's avatar
    歪麦 发表于 2015-08-25 3:12:47 回复 #2

    加入这样的代码就可以不用每次都写 class=“prettyprint”了:

    $(document).ready(function(){
    $("pre").addClass("prettyprint");
    });

    博主的主题不错,大赞!

  3. X's avatar
    X 发表于 2015-01-19 4:16:14 回复 #3

    我是技术盲,但是想问一下要是用的Highlight.js高亮应该怎么集成到function.php里面呢

  4. ysbinang's avatar
    ysbinang 发表于 2014-07-05 4:15:09 回复 #4

    这个我的主题是集成的,可是不能显示PHP代码,会直接转义的,能帮我看看嘛

  5. 第十一颗行星's avatar
    第十一颗行星 发表于 2014-01-14 12:39:21 回复 #5

    安装教程,高亮已经成功显示了。 但是还有个问题,怎么才能显示行号呢? 我用的是Google提供的沙漠主题~ 谢谢

  6. kodango's avatar
    发表于 2013-10-06 2:19:06 回复 #6

    评论测试:

    #include <stdio.h>
    int main()
    {
        printf("%s", "hello, world");
        return 0;
    }