首先语法高亮我推荐的是Prism.js,这属于最轻量级的语法高亮js库,但由于这个库的加载顺序特殊性,我无法在ajax下挂载出效果,根据我的测试,它必须在pre标签之前就要挂载好脚本,ajax重载无法在请求之前挂载,用before:function(){}也不行。最后只好放弃。
先后试了其他比较轻量级的Rainbow、SHJS等。比较复杂,平时不怎么贴代码,而且仅限于CSS、JavaScript、Html 三大类。所以最终选择了DlHighlight,加载比较简单。这是作者的介绍 http://mihai.bazon.net/projects/javascript-syntax-highlighting-engine
好像是基于Syntax引擎的。
普通的挂载方式
首先下载其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()函数可以放到需要重新加载的地方。
最后是下载地址
还有另一个是SHJS,喜欢可以研究一下
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/4557.html