2006-12-30

语法高亮的简单JavaScript实现

关键字: 语法高亮 JavaScript
语法高亮的简单JavaScript实现

作者：cleverpig

image



        最近参考Fernando M.A.d.S编写的CodePress，做了一个简单的JavaScript语法高亮实现（需要prototype1.4版支持）。在这里，和大家分享一下。

演示页面：
image


        页面延用CodePress的风格，使用多个分别对应语言的CSS文件，文件名以相应的语言为后缀：比如codepress-java.css就是java语言的样式表：
css 代码
 
  1. b,i,s {display:inline;font-size:12px;font-weight:bold;text-decoration:none;letter-spacing:1px}  
  2. b {color:#7F0055;} /* reserved words */  
  3. i, i b, i s {color:#3F7F5F;} /* comments */  
  4. s, s b {color:#2A00FF;font-weight:normal;} /* strings */  
        其中定义了一些在渲染后出现的html element的样式。

        页面主要方法synchronize和render调用后面介绍的HighlightRender类方法：
js 代码
 
  1. //同步语法显示：动态修改css，进行渲染  
  2. function synchronize(syntax){  
  3.         $('syntaxHighlightCSSLink').href='./css/languages/codepress-'  
  4.                 +syntax+'.css?forceReload='+(new Date().valueOf());  
  5.         $('syntaxSelector').value=$('currentSyntax').innerHTML=syntax;  
  6.         if ($F('editor')!=''){  
  7.                 render();  
  8.         }  
  9. }  
  10. //根据语言选择栏的值进行渲染，并将渲染结构显示在highlightView中  
  11. function render(){  
  12.         var syntaxRender=new HighlightRender($F('syntaxSelector'));  
  13.         $('highlightView').innerHTML=syntaxRender.syntaxHighlight($F('editor'));  
  14. }  
HighlightRender类：

        核心代码为前面的languageReplacePatterns属性（按照语言区分的正则表达式数组）和syntaxHighlight方法。
js 代码
 
  1. /** 
  2.  * 语法高亮渲染器：支持java、javascript、php、html、css 
  3.  */  
  4. var HighlightRender=Class.create();  
  5. HighlightRender.prototype={  
  6.         //用于语法高亮的语言替换模板  
  7.         languageReplacePatterns:{   
  8.                 java : [  
  9.                         …  
  10.                 ],  
  11.                 javascript : [  
  12.                         …  
  13.                 ],  
  14.                 php : [  
  15.                         …   
  16.                 ],  
  17.                 html : [  
  18.                         …   
  19.                 ],  
  20.                 css : [  
  21.                         …  
  22.                 ],  
  23.                 text : [  
  24.                         // do nothing, as expected  
  25.                 ]   
  26.         },  
  27.         //当前使用的语言  
  28.         language:'',  
  29.         initialize:function(language){  
  30.                 this.language=language;  
  31.         },  
  32.         /** 
  33.          * 计算数字的位数 
  34.          * @param num 
  35.          * @return 
  36.          */  
  37.         calculateNumBit:function(num){  
  38.                 var s=''+num;  
  39.                 return s.length;  
  40.         },  
  41.         /** 
  42.          * 添加行编号 
  43.          * @param str 字符串 
  44.          * @return 返回添加行编号后的html 
  45.          */  
  46.         addIdentity:function(str){  
  47.                 var rows=str.split('<br>');  
  48.                 var code='';  
  49.   
  50.                 var codeLineMaxBit=this.calculateNumBit(rows.length);///10+1;  
  51.                 for(var i=0;i<rows.length;i++){  
  52.                         var codeLineNum=i+1;  
  53.                         var currentLineBit=this.calculateNumBit(i+1);///10+1;  
  54.                           
  55.                         for(var j=0;j<=codeLineMaxBit-currentLineBit;j++){  
  56.                                 codeLineNum+='&nbsp;';  
  57.                         }  
  58.                           
  59.                         var codeLine='<id>'+codeLineNum+'</id>'+rows[i]+'<br>';  
  60.                         code+=codeLine;  
  61.                 }  
  62.                 return code;  
  63.         },  
  64.         /** 
  65.          * 语法高亮 
  66.          * @param str 原始字符串 
  67.          * @return 返回高亮处理后的html 
  68.          */  
  69.         syntaxHighlight:function(str){  
  70.                 var ret=str;  
  71.                 if (this.language=='html'){  
  72.                         ret=ret.escapeHTML();  
  73.                 }  
  74.                 ret = ret.replace(/<.*?>/g,'').replace(/\n/g,'<br>').replace(/\s/g,'&nbsp;');  
  75.                 if (ret.lastIndexOf('<br>')<0){  
  76.                         ret+='<br>';                                  
  77.                 }  
  78.                 for(i=0;i<this.languageReplacePatterns[this.language].length;i++){   
  79.                         ret = ret.replace(  
  80.                                 this.languageReplacePatterns[this.language][i],  
  81.                                 this.languageReplacePatterns[this.language][i+1]);  
  82.                 }  
  83.                 ret=this.addIdentity(ret);  
  84.                 return ret;  
  85.         }  
  86. }  

辅助工具类OSUtil：
js 代码
  1. /** 
  2.  * 工具类 
  3.  */  
  4. var OSUtil=Class.create();  
  5. OSUtil.prototype={  
  6.         initialize:function(){},  
  7.         /** 
  8.          * 测试浏览器类型 
  9.          * @return IE 或者 Mozilla 
  10.          */  
  11.         detectOS:function(){  
  12.                 if (window.navigator.appName.indexOf('Microsoft')>=0){  
  13.                                 return "IE";  
  14.                 }  
  15.                 else if (window.navigator.appName.indexOf('Netscape')>=0){  
  16.                         return "Mozilla";  
  17.                 }  
  18.         },  
  19.         /** 
  20.          * 通过事件找到事件触发对象 
  21.          * @param evt 事件对象 
  22.          * @return 事件触发对象 
  23.          */  
  24.         getElementByEvent:function(evt){  
  25.                 //根据事件的发起者id查找影响者cellUnit，进而触发数据变化的影响  
  26.                 var elementId='';  
  27.                 if (this.detectOS()=='IE'){  
  28.                         elementId=evt.srcElement.id;  
  29.                 }  
  30.                 else{  
  31.                         elementId=evt.currentTarget.id;  
  32.                 }  
  33.                 return $(elementId);  
  34.         }  
  35. } 

更完善的实现：


image
dp.SyntaxHighlighter堪称
实现highlight的JS“忍者”


        dp.SyntaxHighlighter
相关资源：

        演示代码下载
        在线演示
        Prototype开发者手册
        Fernando M.A.d.S编写的CodePress
评论
cleverpig 2007-01-04
恩，大家说得有道理。应该参考一下javaeye的code标签，使用
<ol start="1">
  <li class="alt">..</li>
  ...
</ol>

的形式把代码行功能提炼出来，然后再加上代码收缩功能。
但是使用ol+lo模式渲染代码的做法，需要重新修改css和正则表达式。
本文是出于演示和研究的目的，如果实际使用还是直接使用dp.SyntaxHighlighter比较好。
daoger 2006-12-31
http://www.javaeye.com/topic/24362

都很好啊！
lighter 2006-12-31
非常不错,看一下上面的代码高亮的演示,楼主可以改进一下,做得更好一些.
强烈支持一下
JavaFlasher 2006-12-31
确实不错，就是缺少 代码折叠 功能， 非常遗憾 不知道 这个功能 怎么实现 ！
cleverpig
搜索本博客
最近加入圈子
存档
最新评论