JS实现代码高亮功能教程-网页编程网

当前位置：主页 >> 网页特效 >> 正文

JS实现代码高亮功能教程

阅读：2911 输入：2022-07-09 07:50:46

如何实现高亮

平时我们在使用一些代码编辑器或者Markdown时很好奇它的代码高亮是如何实现的。其实原理也挺简单的，就是区分代码内容的不同token并加以颜色标识。我们将以js规则为例来说明这一过程。在对js代码的编译处理中其实只要第一个过程词法法分析即可实现基本的代码高亮，这个过程被称为lexer或者tokenizer。下面介绍一下词法语法结构。

词法结构

如何定义一门语言？想要分析一门语言，必须要从它的结构入手提取出一般化的东西。比如说中文的句式（|是或者的关系）：

句子->主语谓语宾语

主语->代词|名词|短语

代词->你|我|他

可以通过迭代的方式来描述该语言。计算机语言也是语言，可以同样的方式来描述它，而且比自然语言更加的严格。计算机中定义该结构的式子就叫产生式，产生式是由终结符、非终结符、以及关系组成。终结符是无法往下扩展的符号，比如说代词中的“你”，“我”，“他”无法往下划分，非终结符由终结符、非终结符组成。产生式的写法：由巴克斯-若尔提出来的BNF(backs-Naur Form)产生式写法比较流行。上面的中文结构可以写成：

<中文>::=<句子>|<中文><句子>

<句子>::=<主语><谓语><宾语>|<主语><谓语>

<主语>::=<代词>|<名词>|<名词性短语>

<代词>::="你"|"我"|"他"

还有扩展后的EBNF:

中文::={句子} //{}表示可以重复多次

句子::=主语谓语 [宾语] //方括号0-1个

主语::=代词 | 名词 | 名词性短语

代词::="你"|"我"|"他"

了解了产生式的写法，再来了解形式化语言的类型。

所有的计算机语言都属于形式化语言，根据其表达能力，划分了乔姆斯基谱系，从0-3规则越来越严格。他们也是从属关系，即3型必从属于2型，以此类推。(下方产生式的？即可指代终结符亦可指代非终结符).0-型文法（无限制文法或短语结构文法）所有的计算机语言都属于此范畴，计算机语言必须是图灵完备的，也就是说该语言能完整编写出一个图灵机实现所有功能。

产生式?::=?

2.1-型文法（上下文相关文法）自然语言文法

产生式<上文><A><下文>::=<上文><B><下文>

3.2-型文法生成上下文无关语言，为大多数编程语言提供理论基础

产生式<A>::=?

4.3-型正规语言，表达能力等同有限状态自动机

产生式<A>::=<A>?

参考文献：https://262.ecma-international.org/11.0/#sec-lexical-grammar

Javascript的产生式

了解当中的Lexical Grammar部分就能完成token解析了，其它语言也相通。但是需要精简一下，毕竟对于新的es6语法，以及完全还原JavaScript 的解析代码量很大，也要做许多复杂处理，导致主题的思路反而不明确，所以简化下它的Lexical产生式如下：

实例中的xregexp。

需要辨识出注释，运算符，数字，变量，关键字这些即可，运用正则的强大能力对字符串处理。

用文件管理

使用一个文件来管理以及配置要用的正则，通过命名分组方式来分辨不同的token类型。

实例中compileRegExp

然后写个函数处理html过来的字符串以及执行正则。

实例中escapehtml、scan。

<html>
<head>
    <style>
        .code-area{
            padding: 4px;
            margin: 0 auto;
            width: 650px;
            height: auto;
            min-height: 96px;
            background: #000;
            border: 1px solid #ccc;
            color: #fff;
        }
        .code-area span{
            white-space: nowrap;
        }
        .keywords{
            color: #c678dd;
        }
        .identifier{
            color:#61aeee;
        }
        .white-space{
           display: inline-block;
           width: .5em;
        }
        .string-literal{
            color: #d19a66;
        }
        .punctuator{
            color: #fff;
        }
        .Constructors{
            color: #98c379;
        }
        .Comments{
           color:#5c6370;
        }
        .number-literal{
            color: #98c379;
        }
    </style>
    <script>
//lexer.js
function escapehtml(str) {
    console.log(str);
    var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
    return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
}
function scan(htmlText,callback){
    let str = escapehtml(htmlText);
    console.log(str,jsLexer);
    jsLexer.lastIndex = 0;
    while(jsLexer.lastIndex < str.length){
        let r = jsLexer.exec(str);
        callback(r);
        // fs.appendFileSync('./data.txt',JSON.stringify(r)+"\n");
        if(!r[0].length)
            break;
    }
}
//文件名regExpCompiler.js
var jsLexer = jsLexer || (function(scope){
    let keywords = /(?:const|yield|import|get|set|async|await|break|case|catch|continue|default|delete|do|else|finally|for|function|if|in|of|instanceof|new|return|switch|throw|try|typeof|let|var|while|with|debugger|__parent__|__count__|escape|unescape|with|__proto__|class|enum|extends|super|export|implements|private|public|interface|package|protected|static)(?![a-zA-Z\d\$_\u00a1-\uffff])/;
    let xregexp = {
        InputElement:"<WhiteSpace>|<LineTerminator>|<Comments>|<Token>",
        WhiteSpace:/ /,//空格符
        //行终结符
        LineTerminator:/\n/,
        //匹配注释
        Comments:/\/\*(?:[^*]|\*[^\/])*\*\/|\/\/[^\n]*/,
        Token:"<Literal>|<Keywords>|<Constructors>|<Identifier>|<Punctuator>",
        Literal:"<NumberLiteral>|<BooleanLiteral>|<StringLiteral>|<NullLiteral>",
        //数字类型
        NumberLiteral:/(?:[1-9][0-9]*|0)(?:\.[0-9]*)?|\.[0-9]+/,
        //布尔类型
        BooleanLiteral:/true|false/,
        //匹配字符串、字符串模板、正则
        StringLiteral:/\"(?:[^"\n]|\\[\s\S])*\"|\'(?:[^'\n]|\\[\s\S])*\'|\`(?:[^'\n]|\\[\s\S])*\`|\/[^\/].*\//,
        NullLiteral:/null/,
        Keywords:keywords,
        //Global的构造函数
        Constructors:/Array|Boolean|Date|Function|Iterator|Number|Object|RegExp|String|Proxy|ArrayBuffer|Float32Array|Float64Array|Int16Array|Int32Array|Int8Array|Uint16Array|Uint32Array|Uint8Array|Uint8ClampedArray|Error|EvalError|InternalError|RangeError|ReferenceError|SyntaxError|TypeError|URIError|JSON|Math/,
        //变量标识符
        Identifier:/[a-zA-Z\$_\u00a1-\uffff][a-zA-Z\d\$_\u00a1-\uffff]*/,
        //运算符
        Punctuator:/\+|\-|\*|\\|\{|\}|\<|\>|\+\+|\-\-|\=|$|$|;|\,|\[|\]|\./,
    };
    function compileRegExp(xregexp,name){//替换当中的字符串最后变成终结符中的正则
        if(xregexp[name] instanceof RegExp) return  `(?<${name}>${xregexp[name].source})`;
        let regexp = xregexp[name].replace(/\<([^>]+)\>/g,function(str,$1){
            return compileRegExp(xregexp,$1);
        });
        return regexp;
    }
    let  compiledRegExp = compileRegExp(xregexp,"InputElement");
    let  lexerRegExp = new RegExp(compiledRegExp,"g");
    return lexerRegExp;
})(typeof window !== "undefined" && window || this);

if(typeof module !== "undefined" && module.exports){
    module.exports = jsLexer;
}

</script>
</head>
<body>
<div class="code-area" id="textEl">
function show(){//render board
    let board=document.getElementById("board");
    board.innerHTML="";
    for(let i=0;i<pattern.length;i++){
        for(let j=0;j<pattern[i].length;j++){
            let cell=document.createElement("div");
            cell.classList.add("cell");
            cell.innerText=["","O","X"][pattern[i][j]];
            cell.addEventListener("click",()=>{move(i,j)})
            board.appendChild(cell);
        }
        board.appendChild(document.createElement("br"))
    }
}
/*
* @param xregexp {string|regexp} 输入的要解析的自定义正则
* @param name {string} 在集合中查找的子串
*/
function compileRegExp(xregexp,name){//编译正则
    if(xregexp[name] instanceof RegExp) return  `(?<${name}>${xregexp[name].source})`;
    let regexp = xregexp[name].replace(/\<([^>]+)\>/g,function(str,$1){
        return compileRegExp(xregexp,$1);
    });
    return regexp;
}
let  compiledRegExp = compileRegExp(xregexp,"InputElement");
let  lexerRegExp = new RegExp(compiledRegExp,"g");
return lexerRegExp;
</div>
    <script>
        //just identify token in codetext and high light them.
        var elem = document.getElementById("textEl");
        function makeTag(className,text){
            let tagSpan = document.createElement("span");
            tagSpan.className = className;
            tagSpan.innerText = text;
            return tagSpan;
        }
        let htmlText = elem.innerHTML.trim();
        let fragement = document.createDocumentFragment();
        scan(htmlText,(r)=>{//将捕获的命名分组替换为带颜色的span标签
            let tag;
            console.log(r)
            const {
                WhiteSpace,
                Comments,
                Keywords,
                Constructors,
                Identifier,
                LineTerminator,
                Punctuator,
                NumberLiteral,
                StringLiteral
            } =  r.groups;
            switch(true){
                case WhiteSpace!== undefined:tag=makeTag("white-space",WhiteSpace);break;
                case Comments!== undefined:tag=makeTag("Comments",Comments);break;
                case Keywords!== undefined:tag=makeTag("keywords",Keywords);break;
                case Constructors!== undefined:tag=makeTag("Constructors",Constructors);break;
                case Identifier!== undefined:tag=makeTag("identifier",Identifier);break;
                case LineTerminator!== undefined:tag=makeTag("line-terminator",LineTerminator);break;
                case Punctuator!== undefined:tag=makeTag("punctuator",Punctuator);break;
                case NumberLiteral!== undefined:tag=makeTag("number-literal",NumberLiteral);break;
                case StringLiteral!== undefined:tag=makeTag("string-literal",StringLiteral);break;
            }
            fragement.append(tag);
        });
        elem.innerHTML = '';
        elem.append(fragement);
    </script>
</body>
</html>

上一篇：php内置代码高亮函数，fopen打开文件并代码高亮
下一篇：Ubuntu安装office软件，在ubuntu下办公

相关阅读: js实现浏览器全屏与工具栏隐藏; js实现批量生成18位身份证号码; 纯javaScript实现指定长度文字展开与收起功能（默认收起）