Google-code-prettify是一个轻量级的代码高亮插件，扩展性也很好。唯一的缺点是显示行号很麻烦。下面这一小段JS代码可以让你的代码显示行号。为了简便，直接使用了JQuery库，用惯了JQuery，原始的JS代码都不会写了:(。

/* prettyprint 行号支持。 */
if(!$.browser.msie)
    var pre = $('.prettyprint');
    pre.each(function(){
        var code = $(this).html().replace(/<br\s*\/*>/ig, '</li><li>');
        code = '<p>代码段</p><ol><li>'+code+'</li></ol>';
        $(this).html(code);
    });
    pre.find('p').click(function(){$(this).next().slideToggle('fast');});
}

原理很简单，在代码层外面套上ul标签，然后将所有的br标签换成</li><li>标签就行了。在Opera、Gecko或是Webkit中都能正常显示。但是IE下不行，所以要把它过滤掉，按照原来的方式显示。

再用下面这段CSS美化一下，效果就更好看了。

.prettyprint{
    background:#eff5f9;
    border:1px solid #bbdae5 !important;
    padding:0px !important;
    overflow:auto;
    word-wrap:break-word;
}
.prettyprint>p{
    padding:2px 10px;
    margin:0px;
    background:#bbdae5;
    cursor:pointer
}
.prettyprint ol{
    padding:0px 5px;
    margin:0px;
    border-left:30px solid rgb(200,200,200);
    list-style-type:decimal-leading-zero;
}
.prettyprint ol li{
    padding:0px;
    margin:0px;
}
.prettyprint ol li:nth-of-type(even){background:#f6fefc;}

把上面这两段代码分别放在调用google-code-prettify代码之后调用，就可以了。