前端代码加亮插件（html，jss，css），支持即刻加亮，运行代码
日期：2014-05-17 浏览次数：20894 次
前端代码加亮插件（html，jss，css），支持即时加亮，运行代码
前端代码加亮插件（html，jss，css），支持即时加亮，运行代码
http://bbs.51js.com/viewthread.php?tid=88379
?
html混合css js语法加亮，
支持即时运行，即时编辑
在代码区点击鼠标右键执行对应功能！
详情见http://tree88.com/?post=4[博客论坛语法加亮插件]
<script charset="gbk" src="http://jsbaba.com/tool/lightcode/lc.js"></script>
直接加亮
<textarea class="lang-html">
<!doctype html>
<html>
<head>
<meta charset="gbk"/>
<title>语法加亮插件例子</title>
<style>
/*内嵌样式*/
h1{
padding:8px;margin:0;
border:1px solid #ddd;
}
</style>
<script src="http://jsbaba.com/tool/lightcode/lc.js"></script>
<script>
/*内嵌js*/
function hello(){
var txt=new Array('h','e','l','l','o');
onload=function(){
for(var i=0;i<txt.length;i++){
alert(txt[i]);
}
};
}
hello();
</script>
</head>
<body>
<div>
<h1 style="color:green;">html加亮例子</h1>
<!--<p>html注释</p>-->
</div>
</body>
</html>
</textarea>
编辑加亮,下面附上加亮插件源代码
<textarea class="lang-js eidt">
$plugin(function(){
$lightcode=function(){
var metaChar='`',//元字符
stxt='0123456789abcdefghijklmnopqrstuvwxyz'.split(''),
splitHTML=/(<script[^>]*?>[\s\S]*?<\/script>)|(<style[^>]*?>[\s\S]*?<\/style>)|(<textarea[^>]*?>[\s\S]*?<\/textarea>)|(<[\w]+[^>]*?>|<\/[\w]+>)|(<!--[\s\S]*?-->)|(<!doctype[^>]*?>)|(\n)/gi,//html正则
splitCSS=/(\{[^\}]*\})|(<!--[\s\S]*?-->)|(\n)|([^\n]+)/g,//css正则
splitJS=/('[\w\W]*?')|("[\w\W]*?")|(\/\*[\w\W]*?\*\/)|(\/\/[\w\W]*?\n)|(?:[\(\[:=,])\s*(\/[^\n]+?\/[gim]{0,3})|\b(break|delete|function|return|typeof|case|do|if|switch|var|catch|else|in|this|void|continue|false|instanceof|throw|while|debugger|finally|new|true|with|default|for|try)\b|\b(Date|Function|Array|Object|Boolean|Global|Math|Number|RegExp|Error|String)\b|\b(undefined|\d+|eval|onload|parseInt|setTimeout|setInterval|clearInterval|alert)\b|(\n)/g,//js正则
beReplaceCharG=[/\\'/g,/\\"/g,/\\\//g,/\\\\/g],//需要被替换的特殊字符
beReplaceCharS=['\\\'','\\\"','\\\/','\\\\'];//需要被替换的特殊字符
var $=$dom_id,
$=$dom_selector,
$encode=$string_encodeHTML,
$each=$object_each,
$getTop=$dom_getTop,
$isWrap=$dom_isWrap,
$ready=$event_ready,
$addCss=$bom_addCss;
function langJS(text_source){
var replaceSource={},//被替换的资源列表
i=beReplaceCharS.length,
stxtI=-1;
while(i--){
if(text_source.indexOf(beReplaceCharS[i])>-1){//找到对应需要被替换的字符
while(1){
if(text_source.indexOf(metaChar+stxt[++stxtI])==-1){
replaceSource[metaChar+stxt[stxtI]]=i;
text_source=text_source.replace(beReplaceCharG[i],metaChar+stxt[stxtI]);
break;
}
}
}
}
text_source=(text_source+'\n')
.replace(/&/g,'&')
.replace(/</g,'<')
.replace(/>/g,'>')
.replace(/\t/g,' ')
.replace(/ /g,' ')
.replace(splitJS,function(a){
switch(true){
case !!arguments[1]:;//单引号
case !!arguments[2]:return '<q>'+a.replace(/\n/g,function(a){
return '</q></li><li><q>'
})+'</q>';//双引号
case !!arguments[3]:return '<s>'+a.replace(/\n/g,function(a){
return '</s></li><li><s>'
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
