When I googled Syntax Highlighter, the length of the script I found is too big. In most time, I only display some short script on the web page. So I decide to develop a simple script to highlight the syntax of the code.

Thanks for the javascritp regular expression tester, many concise regular expression patterns were developed so that the length of the script here is just 3k bytes. It's language independent because you could update the syntax list in the sytax Array to decide which syntax to highlight.

var syntax = ["var","new","return","this","function","do","null","while","if"];

Now let's start step by step.

Highlighting String

The difficulty is how to seperate the string like words in regular expression patterns. The following scripts could partially solve the problem. The string commas111 and commas222 are used to replace ' or " in regular expression patterns temporarily.

function hltstring(str) {
str = str.replace(/(\/.*\/[gmi]?,)/g,function($0,$1){
    var t1 = $1.replace(/'/g, "commas111");
    t1 = t1.replace(/"/g,"commas222");

    var re= new RegExp($1.quote(), "");
    var tmp = $0.replace(re,t1);
    return tmp

});
str = str.replace(/('[^'^\n]*')/g, "<span style='color:#c00000'>$1</span>");
return str.replace(/("[^"^\n]*")/g, '<span style="color:#c00000">$1</span>');
} 

... ...

str = str.replace(/(\/.*\/[gmi]?,)/g,function($0,$1){
    var t1 = $1.replace(/commas1{3}/g,"'");
    t1 = replace(/commas2{3}/g,'"');
    var re= new RegExp($1.quote(), "");
    var tmp = $0.replace(re,t1);
    return tmp;

});

Highlighting Syntax

for (j = 0;j < syntax.length; j++) {
    var re = new RegExp('(\\b'+syntax[j]+')(\?\!")\\b', 'g');  
    
    str = str.replace(re, '<code style="color:#6699cc">$1</code>');
}

Highlighting Comment

The following script is used to highlight inline comment.

function hltcomment(str) {
var re0= new RegExp("(\\s+//.*)", "g");

var strcom = str.replace(re0, function($0,$1){
    var tmp = $1.split(/<[a-zA-Z\/][^>]*>/g);
    tmp = tmp.join("");
    var re= new RegExp( $1.quote(), "");
    var result = $0.replace(re,'<span style="color:green">'+tmp+'</span>');
     //  return {width: "10px"; height: "20px"} 
    return result;
});

return strcom;
}

Indent the script

The most jobs here is on IE because IE works not correctly when spaces and line breaks </br> in tag <pre>

if (!document.all){
        codeblock[i].innerHTML = str.replace(/([\;\{])/g,"$1</br>");
    }
    else
    {   
      var div = creatediv(codeblock[i]);    
      str = indentIE(str,"^(\\s*)");
      str = indentIE(str,"\\n([\\t ]*)");
      str = str.replace(/\n/g,"</br>");
      div.innerHTML = str;
      div.style.paddingBottom="10px";
     }

Download the whole script here.