首先语法高亮我推荐的是Prism.js,这属于最轻量级的语法高亮js库,但由于这个库的加载顺序特殊性,我无法在ajax下挂载出效果,根据我的测试,它必须在pre标签之前就要挂载好脚本,ajax重载无法在请求之前挂载,用before:function(){}也不行。最后只好放弃。


先后试了其他比较轻量级的Rainbow、SHJS等。比较复杂,平时不怎么贴代码,而且仅限于CSS、JavaScript、Html 三大类。所以最终选择了DlHighlight,加载比较简单。这是作者的介绍 http://mihai.bazon.net/projects/javascript-syntax-highlighting-engine
好像是基于Syntax引擎的。

普通的挂载方式

DlHighlight
首先下载其hl-all.js和style.css,然后在网站头部引用(这个不用多说了);

然后使用,下面这句代码来Call it(相当于执行函数)

DlHighlight.HELPERS.highlightByName("fooname", "pre");

可以将这句代码放在body标签来onload,如下:

<body onload="DlHighlight.HELPERS.highlightByName("fooname", "pre");">

最后就是pre标签的引用值,一般默认的方式就是

<pre>// 这里放代码</pre>

而要使用DLHL来高亮就要这样:

<pre name="fooname" class="这里是代码类型,比如js">// 这里放代码</pre>

效果就出来了。

ajax方式重载

我们可以使用js判断页面出现pre标签时才加载高亮脚本。
首先将执行函数写入hl-all.js中,也就是将

DlHighlight.HELPERS.highlightByName("fooname", "pre");

放在hl-all.js最后,如果要单独拿出来引用它将找不到hl-all.js(因为我们不会在所有页面都引用它),这会对其他js执行造成阻断。

然后自定义一个函数判断并加载这个hl-all.js

var theme_dir = $('head #default-css').attr('href').split('style.css')[0]; // 找到id为default-css的标签,以style.css分割href,第一段就是主题路径
function dlhl(){
    if($('#main pre').length>0){ // 判断是否含有pre标签,如果有则加载并执行hl-all.jjs
        $.getScript(theme_dir+"js/hl-all.j.js");    // 如果hl-all.js不是放在主题目录js文件夹中,则要修改路径    
    }
}

以上抓取主题路径是我个人的方法,也可以直接使用绝对路径。这个dlhl()函数可以放到需要重新加载的地方。


最后是下载地址

DlHighlight下载地址

还有另一个是SHJS,喜欢可以研究一下

SHJS下载地址