javascript实现的超强语法高亮引擎

2016-02-19 16:15 13 1 收藏

下面是个javascript实现的超强语法高亮引擎教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

【 tulaoshi.com - Web开发 】

SyCODE Syntax Highlighter是一个基于javascript实现的语法高亮程序,实现方式借鉴了著名的db.SyntaxHighlighter采用正则表达式进行关键字匹配,处理速度比db.SyntaxHighlighter高出 5~10倍,是目前处理速度最快的javascript语法高亮程序。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

SyCODE Syntax Highlighter具有速度高可扩展性强的特点,在一台当前主流PC机上可以轻松完成32KB的代码高亮处理,能够一次性完成64KB的代码高亮处理而不出现脚本缓慢提示,通过添加不同的正则表达式可以实现任何一种编程语言的语法高亮处理。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

SyCODE Syntax Highlighter 1.0 内部已经实现二十于种语系的语法高亮,包括:
1. C/C++
2. C#
3. CSS
4. Delphi/Kylix
5. Pascal
6. Java
7. Vb/Vb.net
8. J(ava)Script
9. ActionScript
10. Php
11. Python
12. Ruby/Rails
13. Perl
14. Assembly
15. Bat 批处理
16. UNIX Shell
18. AWK
19. Sql
20. xml/xhtml

example: Highlighter.Execute(cleanCode, language);

Effect:
var Highlighter = {
    Brushes: {},
    RegexLib: {
        MultiLineCComments : new RegExp('/*[sS]*?*/', 'gm'),
        SingleLineCComments : new RegExp('//.*$', 'gm'),
        SingleLinePerlComments : new RegExp('#.*$', 'gm'),
        DoubleQuotedString : new RegExp('"(?:.|(")|[^""n])*"','g'),
        SingleQuotedString : new RegExp("'(?:.|(')|[^''n])*'", 'g')
    },
    Match: function(value, index, css) {
        this.value = value;
        this.index = index;
        this.length = value.length;
        this.css = css;
    },
    Execute: function(str,lang) {
        var registered = new Object();
        for(var brush in Highlighter.Brushes)
        {
            var aliases = Highlighter.Brushes[brush].Aliases;
            if(aliases == null) continue;
            for(var i=0;ialiases.length;i++) registered[aliases[i].toLowerCase()] = brush;
        };
        if(!!registered[lang.toLowerCase()]) {
            var ht = new Highlighter.Brushes[registered[lang.toLowerCase()]]();
            return ht.Highlight(str);
        }
        else {
            str = str.replace(/&/g, '&');
            str = str.replace(//g, '');
            str = str.replace(//g, '');
            str = str.replace(//g, '    ');
            str = str.replace(/[ ]{2}/g, '  ');
            return str.replace(//g, 'br/');
        }
    }
};

来源:http://www.tulaoshi.com/n/20160219/1611459.html

延伸阅读
标签: Web开发
最近在学习jBPM和Javascript,所以按照一些相关概念自己写了下面的200行代码的“工作流引擎”,工作流管理系统包含了流程定义,引擎,及应用系统三个主要部分,下面的代码实现了流程的分支合并,目前只支持一种环节上的迁移。拷贝到html,双击就可以跑起来。 var workflowDef = { start:{ ...
标签: Web开发
在制作搜索引擎的时候、或者做页面分析及数据提取的时候,经常面临页面中存在许多javascript,而页面内容,相当一部分写入到了这些js脚本的命令中,而导致正常的DOM分析失败,无法提取所需的信息。 当然,如果这个页面模板确定,针对这个页面制作信息提取模板也不很难,每个页面人工的分析出需要提取的信息的位置,然后制作模板。可是对于g...
标签: Web开发
在网上看到有不少JS设计模式的示例。 今天参照: http://www.cnblogs.com/iloveu/archive/2009/03/31/1426234.html 写了一下,记录在此,仅作备忘: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml...
标签: Web开发
在 Facebook 上有一个彩蛋: 登录 facebook.com ,点击你首页的任何地方,键盘输入 Up, Up, Down, Down, Left, Right, Left, Right, B, A, Enter 后,再点击页面或滚动一下滚动条,你会发现特殊的变化(如下图),嘿嘿 ^^ 玩过“魂斗罗”的朋友,肯定一眼就能看出输入的字符原来就是“魂斗罗”中的“秘技”。其实“秘技”的术语叫 Konami ...
标签: Web开发
在JavaScript中我们需要用到trim的地方很多,但是JavaScript又没有独立的trim函数或者方法可以使用,所以我们需要自己写个trim函数来实现我们的目的。      方案一:      以原型方式调用,即obj.trim()形式,此方式简单且使用方面广泛,定义方式如下: script language=”javascript” /** * 删除...

经验教程

290

收藏

100
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部