pre 显示html代码插件,pre标签内JavaScript代码的高亮显示插件

插件经过IE6-10、Chrome、Firefox等浏览器的测试。

目前支持关键字、字符串、注释、正则表达式的高亮显示，现在逻辑可能比较简单，后期会继续完善。

使用示例：

Html代码

Page Title

//this is comment

var me = "tjuking";

var reg = /[0-9]*/g;

需要在head标签内引入CSS文件，在body标签结束前引入JS文件，需要加亮的pre标签添加class值“highlighter“。

JS代码：

(function(doc){

var hls = getHighlighters("highlighter");

for(var i=0; i

var content = hls[i].innerHTML;

var varReg = /([^\w\.\$_])(break|case|catch|continue|debugger|default|delete|do|else|finally|for|function|if|in|instanceof|new|return|switch|this|throw|try|typeof|var|void|while|with)([^\w])/g;

var strReg = /(".*?")|('.*?')/g;

var commentReg = /([^\\]\/\/.*)|(\/\*(.|\n\r|\n)*\*\/)/g;

var regReg = /[^

content = content.replace(strReg, "$&");

content = content.replace(regReg, "$&");

content = content.replace(commentReg, "$&");

content = content.replace(varReg, "$1$2$3");

//IE8及以下版本通过innerHTML获取的文本丢失换行，多添加pre标签属于hack

hls[i].innerHTML = "

" + content + "

";

}

//获取需要JavaScript代码块

function getHighlighters(searchClass) {

var classElements = [],

els = document.getElementsByTagName("pre"),

elsLen = els.length,

pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");

for(i=0, j=0; i

if(pattern.test(els[i].className)){

classElements[j] = els[i];

j++;

}

}

return classElements;

}

})(document);

IE8及以下版本中，使用innerHTML获取pre标签内的文本时，会丢失换行。通过在外层添加pre标签能够解决这个问题。

CSS配色：

.hl-cm{

color: #5C8026;

}

.hl-cm .hl-st, .hl-cm .hl-kw, .hl-cm .hl-rg{

color: #5C8026;

font-weight: normal;

}

.hl-st{

color: #0000FF;

}

.hl-st .hl-kw, .hl-st .hl-rg, .hl-rg .hl-cm{

color: #0000FF;

}

.hl-rg{

color: #DAA520;

}

.hl-rg .hl-kw, .hl-rg .hl-st, .hl-rg .hl-cm{

color: #DAA520;

font-weight: normal;

}

.hl-kw{

color: #A52A2A;

font-weight:bold;

}

这里要注意各匹配的优先级关系，匹配嵌套时的以最外层颜色为准。