前端代码加亮插件（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');
οnlοad=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>'
})+'</s>';//多行注释
case !!arguments[4]:return '<s>'+a.replace('\n','')+'</s></li><li>';//单行注释
case !!arguments[5]:return a.substr(0,1)+'<u>'+arguments[5]+'</u>';//正则
case !!arguments[6]:return '<b>'+a+'</b>';//关键字
case !!arguments[7]:return '<b>'+a+'</b>';//类数据
case !!arguments[8]:return '<i>'+a+'</i>';//bom
case !!arguments[9]:return '</li><li>';//bom
}
});
for(var remeta in replaceSource){
text_source=text_source.replace(new RegExp(remeta,'g'),beReplaceCharS[replaceSource[remeta]]);
}
return text_source.replace(/<\/li><li>$/,'');
}
function langCSS(text_source){
splitCSS=/(\{[^\}]*\})|(\/\*[\w\W]*?\*\/)|(\n)|([^\n\{\}]+)/g;
return text_source
.replace(splitCSS,function(_,a,b,c,d){
switch(true){
case !!a:
return _.replace(/([^{\n;]+?:[^}\n;]+)|(\n)|(\/\*[\w\W]*?\*\/)/g,function(_,a,b,c){
switch(true){
case !!a:
var key=a.split(':')[0],
val=a.split(':')[1];
return '<i>'+key+'</i>:<q>'+val+'</q>';
case !!b:return '</li><li>';
case !!c:return '<s>'+$encode(c)+'</s>';
}
});
case !!b:return '<s>'+$encode(b)+'</s>';
case !!c:return '</li><li>';
case !!d:return '<u>'+d+'</u>';
}
}).replace(/\t/g,' ').replace(/ /g,' ');
}
function langHTML(text_source){
return text_source.replace(splitHTML,function(a){
switch(true){
case !!arguments[1]:
return a.replace(/(<script[^>]*?>)([\s\S]*?)(<\/script>)/,function(_,a,b,c){
return '<b>'+a
.replace('<','<')
.replace('>','>')
.replace(/(\w+=)('[\s\S]*?'|"[\s\S]*?")/g,function(a,b,c){
return '<i>'+b+'</i><q>'+c+'</q>';
})
+'</b>'
+langJS(b)
+'<b>'
+c.replace('<','<')
.replace('>','>')+'</b>';
});//脚本
case !!arguments[2]:
return a.replace(/(<style[^>]*?>)([\s\S]*?)(<\/style>)/,function(_,a,b,c){
return '<b>'+a
.replace('<','<')
.replace('>','>')
.replace(/(\w+=)('[\s\S]*?'|"[\s\S]*?")/g,function(a,b,c){
return '<i>'+b+'</i><q>'+c+'</q>';
})
+'</b>'
+langCSS(b)
+'<b>'
+c.replace('<','<')
.replace('>','>')+'</b>';
});//样式
case !!arguments[3]:
return a.replace(/(<textarea[^>]*?>)([\s\S]*?)(<\/textarea>)/,function(_,a,b,c){
return '<b>'+a
.replace('<','<')
.replace('>','>')
.replace(/(\w+=)('[\s\S]*?'|"[\s\S]*?")/g,function(_,a,b){
return '<i>'+a+'</i><q>'+b+'</q>';
})
+'</b>'
+$encode(b)
+'<b>'+c.replace('<','<').replace('>','>')+'</b>';
});//样式
case !!arguments[4]:
return '<b>'+a
.replace('<','<')
.replace('>','>')
.replace(/(\w+=)('[\s\S]*?'|"[\s\S]*?")/g,function(a,b,c){
return '<i>'+b+'</i><q>'+c+'</q>';
})
+'</b>';//标签
case !!arguments[5]:return '<s>'+$encode(a)+'</s>';//注释
case !!arguments[6]:return '<u>'+a.replace('<','<').replace('>','>')+'</u>';//doctype声明
case !!arguments[7]:return '</li><li>';//换行
}
}).replace(/ /g,' ').replace(/\t/g,' ');
}
function lang(text_source,lang_type){
switch(lang_type){
case 'js':
text_source=langJS(text_source);
break;
case 'css':
text_source=langCSS(text_source);
break;
default:
text_source=langHTML(text_source);
}
return ('<ol title="鼠标右键查看更多功能！【查看源代码，编辑代码，执行代码】"><li>'+text_source+'</li></ol>').replace(/<li><\/li><\/ol>$/,'</ol>');
}
//{ 添加样式
$addCss('\
.code-js,\
.code-css,\
.code-html{display:none;}\
.lightcode{\
border:1px solid #999;\
padding:0px;\
font:14px/1.5 Monaco,"Lucida Console","Consolas","Courier New";\
color:#000;\
background:#eee;\
word-wrap:break-word;\
word-break:break-all;\
display:inline-block\9;\
}\
.lightcode .editbox,\
.lightcode.edit .codebox{display:none;}\
.lightcode.edit .editbox{display:block;}\
.lightcode .editbox textarea{\
font:14px/1.5 Monaco,"Lucida Console","Consolas","Courier New",Courier,mono,serif;\
border:0;\
height:190px;\
display:block;\
width:100%;\
resize: none;\
outline: none;\
}\
.lightcode .editbox button{\
padding:0 6px;\
}\
.lightcode .codebox{\
_zoom:1;\
_height:21px;\
min-height:21px;\
}\
.lightcode .editbox{\
padding:3px;\
margin:3px;\
background:#fff;\
border:1px solid #999;\
overflow:hidden;\
_width:97%;\
}\
.lightcode .btnbox{border-top:1px solid #999;padding-top:3px;}\
.lightcode .btnbox span{padding-left:1em;color:green;font-weight:bold;}\
.lightcode a{\
color:#666;\
text-decoration:none;\
margin-left:16px;\
}\
.lightcode a:hover{color:#FF7300;}\
.lightcode ol{\
margin:0;\
padding:0;\
margin-left:48px;\
border-left:1px solid #999;\
background:#FFF;\
}\
.lightcode li{\
padding-left:10px;border-bottom:0px dashed #eee;\
}\
.lightcode .alt{}\
.lightcode b{\
color:#0000C6;\
font-weight:normal;\
}\
.lightcode q{\
color:#666;\
font-style:normal;\
}\
.lightcode q:before{content:"";}\
.lightcode q:after{content:"";}\
.lightcode u{\
color:#008074;\
text-decoration:none;\
}\
.lightcode i{\
color:red;\
font-style:normal;\
}\
.lightcode s{\
color:#b0812c;\
text-decoration:none;\
}\
.lightcode-menu{font-size:12px;position:absolute;width:100px;left:-999px;border:1px solid #999;background:#fff;padding:1px;}\
.lightcode-menu a{display:block;*zoom:1;padding:3px 12px;color:#333!important;text-decoration:none!important;}\
.lightcode-menu a:hover{background:#316ac5;color:#fff!important;}\
');
//}
//{插件初始化
$ready(function(){
var menu=document.createElement('div');
menu.className='lightcode-menu';
menu.innerHTML=''
+'<a idx="1" href="javascript:;">编辑代码</a>'
+'<a idx="2" href="javascript:;">执行代码</a>'
+'<a idx="5" href="http://jsbaba.com/tool/lightcode/index.html" target="_blank">关于插件</a>'
+'';
$('body')[0].appendChild(menu);
document.οnmοusedοwn=function(e){
//alert($isWrap(menu,e?e.target:event.srcElement))
if(!$isWrap(menu,e?e.target:event.srcElement)){
menu.style.left='-999px';
}
}
menu.οnclick=function(e){
var tg=e?e.target:event.srcElement;
menu.style.left='-999px';
switch(tg.getAttribute('idx')){
case '1':
editCode(menu.root);
break;
case '2':
runCode(menu.root);
break;
case '5':
//alert('代码语法加亮插件\n');
break;
}
};
$each($('textarea'),function(node){
if(!/lang-js|lang-css|lang-html/.test(node.className))return;
var type=node.className.match(/lang-(html|js|css)/)[1],
sourceCode=node.value,
code='',
root=document.createElement('div');
root.className='lightcode';
root.type=type;
if(node.className.indexOf('edit')>-1){
root.className+=' edit';
}
code=lang(sourceCode,type);
root.innerHTML=''
+'<div class="codebox">'+code+'</div>'
+'<div class="editbox">'
+'<textarea>'+node.value.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>')+'<\/textarea>'
+'<div class="btnbox">'
+'<button idx="1">加亮代码</button>'
+'<button idx="2">执行代码</button>'
+'<span>提示：你可以先修改代码再执行操作！</span>'
+'</div>'
+'</div>';
node.parentNode.replaceChild(root,node);
root.codebox=root.childNodes[0];
root.editbox=root.childNodes[1];
root.textarea=$('textarea',root.editbox)[0];
root.button=$('button',root.editbox);
root.button[0].οnclick=function(){
lightCode(root);
};
root.button[1].οnclick=function(){
runCode(root);
};
root.codebox.οncοntextmenu=function(e){
menu.root=root;
if(e){
menu.style.left=e.pageX+'px';
menu.style.top=e.pageY+'px';
e.preventDefault();
}else{
menu.style.left=event.clientX+'px';
menu.style.top=event.clientY+document.documentElement.scrollTop+'px';
event.returnValue = false;
}
};
});
function lightCode(root){
root.codebox.innerHTML=lang(root.textarea.value,root.type);
root.className='lightcode';
}
function runCode(root){
var doc=window.open('', '_blank');
doc.document.write(({
js:'<script>'+root.textarea.value+'<\/script>',
css:'样式文件无法单独执行！',
html:root.textarea.value
})[root.type]);
doc.document.close();
}
function editCode(root){
root.className+=' edit';
if($browser.chrome){
$_dt.body.scrollTop=$getTop(root)-120;
}else{
$_de.scrollTop=$getTop(root)-120;
}
}
});
//}
return lang;
}();
});
</textarea>
扫一扫
368
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
