语法高亮的简单JavaScript实现

语法高亮的简单JavaScript实现

作者：cleverpig





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

演示页面：


        页面延用 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 代码

/**   * 工具类   */   var OSUtil=Class.create();   OSUtil.prototype={           initialize:function(){},           /**           * 测试浏览器类型           * @return IE 或者 Mozilla           */           detectOS:function(){                   if (window.navigator.appName.indexOf('Microsoft')>=0){                                   return "IE";                   }                   else if (window.navigator.appName.indexOf('Netscape')>=0){                           return "Mozilla";                   }           },           /**           * 通过事件找到事件触发对象           * @param evt 事件对象           * @return 事件触发对象           */           getElementByEvent:function(evt){                   //根据事件的发起者id查找影响者cellUnit，进而触发数据变化的影响                   var elementId='';                   if (this.detectOS()=='IE'){                           elementId=evt.srcElement.id;                   }                   else{                           elementId=evt.currentTarget.id;                   }                   return $(elementId);           }   } 

更完善的实现：



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


         dp.SyntaxHighlighter
相关资源：

         演示代码下载
         在线演示
         Prototype开发者手册
         Fernando M.A.d.S编写的 CodePress