Create snytax highlighter using JavaScript-CodePudding

I want to create a snytax highlighter. Especially for SQL.

I got a solution in the internet but it was not working.

index.js

var codeElements = $(".article pre code");
var strReg1 = /"(.*?)"/g,
    strReg2 = /'(.*?)'/g,
    specialReg = /\b(new|var|if|do|function|while|switch|for|foreach|in|continue|break)(?=[^\w])/g,
    specialJsGlobReg = /\b(document|window|Array|String|Object|Number|\$)(?=[^\w])/g,
    specialJsReg = /\b(getElementsBy(TagName|ClassName|Name)|getElementById|typeof|instanceof)(?=[^\w])/g,
    specialMethReg = /\b(indexOf|match|replace|toString|length)(?=[^\w])/g,
    specialPhpReg  = /\b(define|echo|print_r|var_dump)(?=[^\w])/g,
    specialCommentReg  = /(\/\*.*\*\/)/g,
    inlineCommentReg = /(\/\/.*)/g;

var htmlTagReg = /(&lt;[^\&]*&gt;)/g;

var sqlReg = /\b(CREATE|ALL|DATABASE|TABLE|GRANT|PRIVILEGES|IDENTIFIED|FLUSH|SELECT|UPDATE|DELETE|INSERT|FROM|WHERE|ORDER|BY|GROUP|LIMIT|INNER|OUTER|AS|ON|COUNT|CASE|TO|IF|WHEN|BETWEEN|AND|OR)(?=[^\w])/g;

codeElements.each(function (){
    var string = this.innerHTML,
    parsed = string.replace(strReg1,'<span >"$1"</span>');
    parsed = parsed.replace(strReg2,"<span class=\"string\">'$1'</span>");
    parsed = parsed.replace(specialReg,'<span >$1</span>');
    parsed = parsed.replace(specialJsGlobReg,'<span >$1</span>');
    parsed = parsed.replace(specialJsReg,'<span >$1</span>');
    parsed = parsed.replace(specialMethReg,'<span >$1</span>');
    parsed = parsed.replace(htmlTagReg,'<span >$1</span>');
    parsed = parsed.replace(sqlReg,'<span >$1</span>');
    parsed = parsed.replace(specialPhpReg,'<span >$1</span>');
    parsed = parsed.replace(specialCommentReg,'<span >$1</span>');
    parsed = parsed.replace(inlineCommentReg,'<span >$1</span>');

    this.innerHTML = parsed;
});

index.css

pre code .string {
    color:#A1E46D;
}
pre code .special {
    color:#D6665D;
}
pre code .special-js {
    color:#6DE4D1;
}
pre code .special-js-glob {
    color:#A1E46D;
    font-weight:bold;
}
pre code .special-comment{
    color:#aaa;
}
pre code .special-js-meth {
    color:#E46D8A;
}
pre code .special-html {
    color:#E4D95F;
}
pre code .special-sql {
    color:#1D968C;
}
pre code .special-php{
    color:#597EA7;
}

index.html

<!DOCTYPE html>
<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="index.css">
     <title>highlightme Test Page</title>
 </head>
 <body>
     <pre>
        <code>
            var test = "Test";
        </code>
     </pre>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="index.js"></script>
 </body>
</html>

I have used jQuery. If there's any error please help me.

And I am actually creating my own snytax highlighter so please don't suggest me bout js libraries.

Thank You

CodePudding user response：

You don't have any elements in your index.html that match the CSS selector .article pre code

var codeElements = $(".article pre code");
var strReg1 = /"(.*?)"/g,
    strReg2 = /'(.*?)'/g,
    specialReg = /\b(new|var|if|do|function|while|switch|for|foreach|in|continue|break)(?=[^\w])/g,
    specialJsGlobReg = /\b(document|window|Array|String|Object|Number|\$)(?=[^\w])/g,
    specialJsReg = /\b(getElementsBy(TagName|ClassName|Name)|getElementById|typeof|instanceof)(?=[^\w])/g,
    specialMethReg = /\b(indexOf|match|replace|toString|length)(?=[^\w])/g,
    specialPhpReg  = /\b(define|echo|print_r|var_dump)(?=[^\w])/g,
    specialCommentReg  = /(\/\*.*\*\/)/g,
    inlineCommentReg = /(\/\/.*)/g;

var htmlTagReg = /(&lt;[^\&]*&gt;)/g;

var sqlReg = /\b(CREATE|ALL|DATABASE|TABLE|GRANT|PRIVILEGES|IDENTIFIED|FLUSH|SELECT|UPDATE|DELETE|INSERT|FROM|WHERE|ORDER|BY|GROUP|LIMIT|INNER|OUTER|AS|ON|COUNT|CASE|TO|IF|WHEN|BETWEEN|AND|OR)(?=[^\w])/g;

codeElements.each(function (){
    var string = this.innerHTML,
    parsed = string.replace(strReg1,'<span >"$1"</span>');
    parsed = parsed.replace(strReg2,"<span class=\"string\">'$1'</span>");
    parsed = parsed.replace(specialReg,'<span >$1</span>');
    parsed = parsed.replace(specialJsGlobReg,'<span >$1</span>');
    parsed = parsed.replace(specialJsReg,'<span >$1</span>');
    parsed = parsed.replace(specialMethReg,'<span >$1</span>');
    parsed = parsed.replace(htmlTagReg,'<span >$1</span>');
    parsed = parsed.replace(sqlReg,'<span >$1</span>');
    parsed = parsed.replace(specialPhpReg,'<span >$1</span>');
    parsed = parsed.replace(specialCommentReg,'<span >$1</span>');
    parsed = parsed.replace(inlineCommentReg,'<span >$1</span>');

    this.innerHTML = parsed;
});

pre code .string {
    color:#A1E46D;
}
pre code .special {
    color:#D6665D;
}
pre code .special-js {
    color:#6DE4D1;
}
pre code .special-js-glob {
    color:#A1E46D;
    font-weight:bold;
}
pre code .special-comment{
    color:#aaa;
}
pre code .special-js-meth {
    color:#E46D8A;
}
pre code .special-html {
    color:#E4D95F;
}
pre code .special-sql {
    color:#1D968C;
}
pre code .special-php{
    color:#597EA7;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body >
     <pre>
        <code>
            var test = "Test";
        </code>
     </pre>
 </body>