首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

前端代码加亮插件(html,jss,css),支持即刻加亮,运行代码

2012-11-01 
前端代码加亮插件(html,jss,css),支持即时加亮,运行代码script charsetgbk srchttp://jsbaba.com/to

前端代码加亮插件(html,jss,css),支持即时加亮,运行代码

<script charset="gbk" src="http://jsbaba.com/tool/lightcode/lc.js"></script>直接加亮<textarea 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.onmousedown=function(e){ //alert($isWrap(menu,e?e.target:event.srcElement)) if(!$isWrap(menu,e?e.target:event.srcElement)){ menu.style.left='-999px'; } } menu.onclick=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].onclick=function(){ lightCode(root); }; root.button[1].onclick=function(){ runCode(root); }; root.codebox.oncontextmenu=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>

?