语法高亮的简单JavaScript实现
作者:cleverpig
最近参考
Fernando M.A.d.S编写的
CodePress,做了一个简单的JavaScript语法高亮实现(需要
prototype1.4版支持)。在这里,和大家分享一下。
演示页面:
页面延用
CodePress的风格,使用多个分别对应语言的CSS文件,文件名以相应的语言为后缀:比如codepress-java.css就是java语言的样式表:
css 代码
- b,i,s {display:inline;font-size:12px;font-weight:bold;text-decoration:none;letter-spacing:1px}
- b {color:#7F0055;}
- i, i b, i s {color:#3F7F5F;}
- s, s b {color:#2A00FF;font-weight:normal;}
其中定义了一些在渲染后出现的html element的样式。
页面主要方法synchronize和render调用后面介绍的HighlightRender类方法:
js 代码
-
- function synchronize(syntax){
- $('syntaxHighlightCSSLink').href='./css/languages/codepress-'
- +syntax+'.css?forceReload='+(new Date().valueOf());
- $('syntaxSelector').value=$('currentSyntax').innerHTML=syntax;
- if ($F('editor')!=''){
- render();
- }
- }
-
- function render(){
- var syntaxRender=new HighlightRender($F('syntaxSelector'));
- $('highlightView').innerHTML=syntaxRender.syntaxHighlight($F('editor'));
- }
HighlightRender类:
核心代码为前面的languageReplacePatterns属性(按照语言区分的正则表达式数组)和syntaxHighlight方法。
js 代码
-
-
-
- var HighlightRender=Class.create();
- HighlightRender.prototype={
-
- languageReplacePatterns:{
- java : [
- …
- ],
- javascript : [
- …
- ],
- php : [
- …
- ],
- html : [
- …
- ],
- css : [
- …
- ],
- text : [
-
- ]
- },
-
- language:'',
- initialize:function(language){
- this.language=language;
- },
-
-
-
-
-
- calculateNumBit:function(num){
- var s=''+num;
- return s.length;
- },
-
-
-
-
-
- addIdentity:function(str){
- var rows=str.split('<br>');
- var code='';
-
- var codeLineMaxBit=this.calculateNumBit(rows.length);
- for(var i=0;i<rows.length;i++){
- var codeLineNum=i+1;
- var currentLineBit=this.calculateNumBit(i+1);
-
- for(var j=0;j<=codeLineMaxBit-currentLineBit;j++){
- codeLineNum+=' ';
- }
-
- var codeLine='<id>'+codeLineNum+'</id>'+rows[i]+'<br>';
- code+=codeLine;
- }
- return code;
- },
-
-
-
-
-
- syntaxHighlight:function(str){
- var ret=str;
- if (this.language=='html'){
- ret=ret.escapeHTML();
- }
- ret = ret.replace(/<.*?>/g,'').replace(/\n/g,'<br>').replace(/\s/g,' ');
- if (ret.lastIndexOf('<br>')<0){
- ret+='<br>';
- }
- for(i=0;i<this.languageReplacePatterns[this.language].length;i++){
- ret = ret.replace(
- this.languageReplacePatterns[this.language][i],
- this.languageReplacePatterns[this.language][i+1]);
- }
- ret=this.addIdentity(ret);
- return ret;
- }
- }
辅助工具类OSUtil:
js 代码
-
-
-
- var OSUtil=Class.create();
- OSUtil.prototype={
- initialize:function(){},
-
-
-
-
- detectOS:function(){
- if (window.navigator.appName.indexOf('Microsoft')>=0){
- return "IE";
- }
- else if (window.navigator.appName.indexOf('Netscape')>=0){
- return "Mozilla";
- }
- },
-
-
-
-
-
- getElementByEvent:function(evt){
-
- 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
分享到:
相关推荐
Google语法高亮JavaScript功能提供了一种简单且强大的方式,使网页中的代码展示更加专业和易读。通过利用这个工具,开发者不仅可以提升代码的视觉效果,还能增强用户体验,使得代码分享和交流变得更加愉快和有效。...
在Swing中实现语法高亮,通常涉及到以下步骤: 1. **选择合适的文本模型**:JTextPane使用 StyledDocument 模型,它可以对文本的不同部分应用不同的样式,如字体、颜色和背景色,这对于语法高亮至关重要。 2. **...
在 Visual Studio Code (VSCode) 中,语法高亮和语义高亮是两种增强代码可读性和美观性的关键功能。这两种高亮方式帮助开发者更好地理解代码结构和含义,从而提高编程效率。 1. **语法高亮 (Syntax Highlight)** ...
VIM支持多种语言的语法高亮,包括C、Java、Python、JavaScript等,当然也包括SystemVerilog。 实现VIM语法高亮通常需要一个特定的语法文件,这些文件以`.vim`或`.vimrc`扩展名存在。例如,你提供的文件`_vimrc`可能...
在本篇内容中,我们将深入探讨如何实现styled-components的语法高亮,这对于开发者来说至关重要,因为良好的代码高亮能提升代码可读性和开发效率。 首先,我们需要理解styled-components的基本概念。它基于模板字符...
在富文本框中实现语法高亮显示,首先需要理解基本的文本渲染原理和文本样式控制。这通常涉及到以下关键技术: 1. **正则表达式**:用于匹配代码中的特定语法元素,如关键字、注释、字符串等。通过预定义的正则模式...
与EditPlus软件配合,对javascript代码进行语法高亮显示
例如,静态资源文件夹`static`中可能包含用于实现语法高亮的各种CSS样式文件和JavaScript脚本。CSS文件通常用于定义不同语法元素的颜色和样式,如关键字用蓝色、字符串用绿色、注释用灰色等。JavaScript文件则负责...
安装和使用这些语法高亮文件非常简单。通常,你需要将`.stx`文件复制到Editplus的安装目录下的`Syntax`文件夹中,然后在Editplus的“工具”菜单中选择“配置文件”,在“语言”选项卡下就可以看到新添加的语法规则。...
这个过程通常由JavaScript库来实现,它们通常包含预定义的语法规则和样式设置。 二、JavaScript代码高亮插件的作用 1. 提升可读性:代码高亮插件可以将代码的各个部分以不同的颜色和样式展示,帮助读者快速区分...
本篇文章将深入探讨如何利用HTML来高亮JavaScript语法。 首先,了解基本原理。代码高亮主要是通过给不同的编程元素(如关键字、变量、字符串等)赋予不同的颜色和样式,以增强代码的视觉效果。在HTML中,我们可以...
**jQuery语法高亮插件详解** 在Web开发中,为了让代码更具可读性和美观性,开发者通常会使用语法高亮工具。"jQuery语法高亮插件"是一个专门为jQuery代码提供色彩鲜明、易于阅读的显示效果的插件。该插件能够帮助...
默认可能已经有九个配置:/L1"C/C++"表示c的高亮,最后/L9"JavaScript"是JavaScript的高亮配置。 现在我们添加其他文件类型的查看方式,添加 Makefile 的查看方式 打开这个文件UltraEdit\WORDFILE.uew,可以...
在UtralEdit中,语法高亮不仅涵盖了常见的编程语言,如Java、C++、Python、JavaScript等,还包括了一些特定领域的语言或脚本,如avs、nwscript、lull等。这些文件的名称(如avs.txt、nwscript.txt、lull.txt)可能...
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记事本中,语法高亮支持多种编程语言,包括但不限于C++、Java、Python、JavaScript、HTML、CSS等。当您打开这些类型的文件时,记事本会自动识别文件类型,并应用相应的颜色编码。例如,关键字通常以一种...
语法高亮是编辑器的关键特性,FastColoredTextBox支持多种编程语言的语法着色,包括但不限于C#、Java、Python、JavaScript等。通过自定义规则,开发者可以轻松添加对新语言的支持。这些规则通常包括关键字、注释、...
本文将详细讲解如何配置EditPlus以支持64位系统和汇编语言的语法高亮。汇编语言是一种低级编程语言,与机器指令直接对应,对于理解计算机底层工作原理和进行特定性能优化至关重要。EditPlus的语法高亮功能可以为汇编...
本文将深入探讨如何使用PHP实现一个简单的源码语法高亮函数类,以及如何扩展其功能以支持更多的编程语言和语法特性。 首先,我们需要理解什么是语法高亮。语法高亮是一种编程和文本编辑器中的功能,它通过使用不同...
在VB(Visual Basic)编程环境中,我们可以利用RichTextBox控件来实现代码的语法高亮显示。...通过学习和分析这个示例,你可以更好地理解如何在 RichTextBox 中实现语法高亮显示,从而创建自己的简单代码编辑器。