Die verfügbaren Syntax-Highlighter waren mir ein wenig bloatig. Also habe ich einen einfachen gebaut.
Im Folgenden der Code. Du siehst natürlich, dass nur die Sachen eingebaut wurden, die tatsächlich bisher für mich nötig waren. Aber es reicht, meine C++-Seite zu highlighten und dieses Script auch.
Die Farben kannste natürlich in der CSS-Datei anpassen.
var styleJs=new Array(
/(var)\b/y,"<span class=\"keyword\">","</span>",
/(Array)\b/y,"<span class=\"lib\">","</span>",
/\b[a-zA-Z_]\w*\b/y,"<span class=\"identifier\">","</span>",
/\b[0-9]\w*\b/y,"<span class=\"number\">","</span>",
/"(\\"|[^"])*?"/y,"<span class=\"string\">","</span>",
/\/(\\\/|[^\/])+?\/\w*/y,"<span class=\"jsRegexp\">","</span>",
/([;()\[\]{},.=+\-*\/%]|<|>|&)+/y,"<span class=\"punctuation\">","</span>",
/\/\/.*/y,"<span class=\"comment\">","</span>",
/\s+/y,"","",//whitespace
/./y,"<span class=\"error\">","</span>",//comment in for displaying unknown syntax
/./y,"","",//fallback
)
var styleCpp=new Array(
/(using|namespace|int|i)\b/y,"<span class=\"keyword\">","</span>",
/\b[a-zA-Z_]\w*\b/y,"<span class=\"identifier\">","</span>",
/\b[0-9]\w*\b/y,"<span class=\"number\">","</span>",
/"[^"]*?"/y,"<span class=\"string\">","</span>",
/([;()\[\]{}]|<|>|&)+/y,"<span class=\"punctuation\">","</span>",
/^#.*/y,"<span class=\"preprocessor\">","</span>",
/\s+/y,"","",//whitespace
/./y,"<span class=\"error\">","</span>",//comment in for displaying unknown syntax
/./y,"","",//fallback
)
function highlight(text,style){
var result="";
var lastIndex=0;
while(lastIndex!=text.length){
for(var i=0;i<style.length;i+=3){
style[i].lastIndex=lastIndex;
var m=style[i].exec(text);
if(m){
lastIndex=style[i].lastIndex;
result+=style[i+1]+m[0]+style[i+2];
break;
}
}
}
return result;
}
[...document.getElementsByTagName("code")].forEach(el=>{
switch(el.className){
case "cpp": return el.innerHTML=highlight(el.innerHTML,styleCpp);
case "js": return el.innerHTML=highlight(el.innerHTML,styleJs);
}
})