`
cleverpig
  • 浏览: 150739 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

语法高亮的简单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.         }  

更完善的实现:



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



        dp.SyntaxHighlighter
相关资源:

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

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

都很好啊!
2 楼 lighter 2006-12-31  
非常不错,看一下上面的代码高亮的演示,楼主可以改进一下,做得更好一些.
强烈支持一下
1 楼 JavaFlasher 2006-12-31  
确实不错,就是缺少 代码折叠 功能, 非常遗憾  不知道 这个功能 怎么实现 !

相关推荐

    Google语法高亮JavaScript功能

    Google语法高亮JavaScript功能提供了一种简单且强大的方式,使网页中的代码展示更加专业和易读。通过利用这个工具,开发者不仅可以提升代码的视觉效果,还能增强用户体验,使得代码分享和交流变得更加愉快和有效。...

    Swing实现编辑器(支持语法高亮)

    在Swing中实现语法高亮,通常涉及到以下步骤: 1. **选择合适的文本模型**:JTextPane使用 StyledDocument 模型,它可以对文本的不同部分应用不同的样式,如字体、颜色和背景色,这对于语法高亮至关重要。 2. **...

    vscode中的语法高亮和语义高亮(Syntax Highlight and Semantic Highlight)

    在 Visual Studio Code (VSCode) 中,语法高亮和语义高亮是两种增强代码可读性和美观性的关键功能。这两种高亮方式帮助开发者更好地理解代码结构和含义,从而提高编程效率。 1. **语法高亮 (Syntax Highlight)** ...

    VIM语法高亮和SV支持

    VIM支持多种语言的语法高亮,包括C、Java、Python、JavaScript等,当然也包括SystemVerilog。 实现VIM语法高亮通常需要一个特定的语法文件,这些文件以`.vim`或`.vimrc`扩展名存在。例如,你提供的文件`_vimrc`可能...

    styledcomponents的语法高亮实现

    在本篇内容中,我们将深入探讨如何实现styled-components的语法高亮,这对于开发者来说至关重要,因为良好的代码高亮能提升代码可读性和开发效率。 首先,我们需要理解styled-components的基本概念。它基于模板字符...

    RichText文本框语法高亮显示

    在富文本框中实现语法高亮显示,首先需要理解基本的文本渲染原理和文本样式控制。这通常涉及到以下关键技术: 1. **正则表达式**:用于匹配代码中的特定语法元素,如关键字、注释、字符串等。通过预定义的正则模式...

    javascript语法高亮文件

    与EditPlus软件配合,对javascript代码进行语法高亮显示

    语法高亮(DISCUZ)

    例如,静态资源文件夹`static`中可能包含用于实现语法高亮的各种CSS样式文件和JavaScript脚本。CSS文件通常用于定义不同语法元素的颜色和样式,如关键字用蓝色、字符串用绿色、注释用灰色等。JavaScript文件则负责...

    Editplus语法高亮(全套共838种)!

    安装和使用这些语法高亮文件非常简单。通常,你需要将`.stx`文件复制到Editplus的安装目录下的`Syntax`文件夹中,然后在Editplus的“工具”菜单中选择“配置文件”,在“语言”选项卡下就可以看到新添加的语法规则。...

    代码高亮显示javascript插件

    这个过程通常由JavaScript库来实现,它们通常包含预定义的语法规则和样式设置。 二、JavaScript代码高亮插件的作用 1. 提升可读性:代码高亮插件可以将代码的各个部分以不同的颜色和样式展示,帮助读者快速区分...

    利用html高亮javascript语法

    本篇文章将深入探讨如何利用HTML来高亮JavaScript语法。 首先,了解基本原理。代码高亮主要是通过给不同的编程元素(如关键字、变量、字符串等)赋予不同的颜色和样式,以增强代码的视觉效果。在HTML中,我们可以...

    jquery语法高亮插件

    **jQuery语法高亮插件详解** 在Web开发中,为了让代码更具可读性和美观性,开发者通常会使用语法高亮工具。"jQuery语法高亮插件"是一个专门为jQuery代码提供色彩鲜明、易于阅读的显示效果的插件。该插件能够帮助...

    ultraedit 各种语法高亮着色官方文档(比如makefile语法)

    默认可能已经有九个配置:/L1"C/C++"表示c的高亮,最后/L9"JavaScript"是JavaScript的高亮配置。 现在我们添加其他文件类型的查看方式,添加 Makefile 的查看方式 打开这个文件UltraEdit\WORDFILE.uew,可以...

    UtralEdit 语法高亮

    在UtralEdit中,语法高亮不仅涵盖了常见的编程语言,如Java、C++、Python、JavaScript等,还包括了一些特定领域的语言或脚本,如avs、nwscript、lull等。这些文件的名称(如avs.txt、nwscript.txt、lull.txt)可能...

    JS实现的代码语法高亮检测工具

    JS实现的代码语法高亮检测工具 支持C/C++、C#、CSS、Delphi/Kylix、Pascal、Java、Vb/Vb.net、J(ava)Script、ActionScript、Php、Python、Ruby/Rails、Perl、Assembly、批处理、UNIX Shell、AWK、Sql、xml/xhtml20...

    windows 记事本,语法高亮

    在Windows记事本中,语法高亮支持多种编程语言,包括但不限于C++、Java、Python、JavaScript、HTML、CSS等。当您打开这些类型的文件时,记事本会自动识别文件类型,并应用相应的颜色编码。例如,关键字通常以一种...

    C#实现的比较牛逼的语法高亮着色编辑器

    语法高亮是编辑器的关键特性,FastColoredTextBox支持多种编程语言的语法着色,包括但不限于C#、Java、Python、JavaScript等。通过自定义规则,开发者可以轻松添加对新语言的支持。这些规则通常包括关键字、注释、...

    EditPlus64位及汇编语言语法高亮配置文件

    本文将详细讲解如何配置EditPlus以支持64位系统和汇编语言的语法高亮。汇编语言是一种低级编程语言,与机器指令直接对应,对于理解计算机底层工作原理和进行特定性能优化至关重要。EditPlus的语法高亮功能可以为汇编...

    php实现简单的源码语法高亮函数类

    本文将深入探讨如何使用PHP实现一个简单的源码语法高亮函数类,以及如何扩展其功能以支持更多的编程语言和语法特性。 首先,我们需要理解什么是语法高亮。语法高亮是一种编程和文本编辑器中的功能,它通过使用不同...

    VB中的RichText文本框语法高亮显示实例

    在VB(Visual Basic)编程环境中,我们可以利用RichTextBox控件来实现代码的语法高亮显示。...通过学习和分析这个示例,你可以更好地理解如何在 RichTextBox 中实现语法高亮显示,从而创建自己的简单代码编辑器。

Global site tag (gtag.js) - Google Analytics