Add simple syntax highlighting

This commit is contained in:
MrOtherGuy 2020-09-02 11:42:30 +03:00
parent aca3302c6f
commit 83a9a5da77
2 changed files with 135 additions and 2 deletions

View file

@ -78,4 +78,11 @@ pre{
.categoryList:not(.blurred)+.categoryList, .categoryList:not(.blurred)+.categoryList,
.hidden{ display: none !important } .hidden{ display: none !important }
.target{ display: flex; justify-content: space-between } .target{ display: flex; justify-content: space-between }
.comment{ color: rgb(50,180,20) }
.selector{ color: violet }
.atrule{ color: blueviolet }
.atvalue{ color: lightblue }
.property{ color: orange }
.value{ color: skyblue }

View file

@ -138,7 +138,8 @@ async function onCategoryClicked(categoryNode,isSecondary = false){
async function onTargetClicked(targetNode){ async function onTargetClicked(targetNode){
const codeBlock = document.querySelector("pre"); const codeBlock = document.querySelector("pre");
fetchWithType(`chrome/${getText(targetNode)}`) fetchWithType(`chrome/${getText(targetNode)}`)
.then(text => (codeBlock.textContent = text)) //.then(text => (codeBlock.textContent = text))
.then(text => Highlighter.parse(codeBlock,text))
.catch(e => console.log(e)) .catch(e => console.log(e))
} }
@ -228,6 +229,131 @@ function createCategories(){
} }
const Highlighter = new(function(){
let state = 0;
let pointer = 0;
let token = "";
function createToken(type){
let n = document.createElement("span");
n.textContent = token;
n.className = (`token ${type}`);
token = "";
return n
}
this.parse = function(node,text){
for(let e of Array.from(node.childNodes)){
node.removeChild(e)
}
let c;
while(pointer < text.length){
c = text[pointer];
token+=c;
switch(state){
case 0:
switch(c){
case "/":
if(text[pointer+1] === "*"){
state = 2;
}
break;
case "{":
state = 3;
node.appendChild(createToken("selector"));
break;
case "@":
state = 5;
break
default:
false
}
break;
case 2:
switch(c){
case "*":
if(text[pointer+1] === "/"){
token += "/";
pointer++;
state = 0;
node.appendChild(createToken("comment"));
}
break;
default:
false
}
break;
case 3:
switch(c){
case ":":
node.appendChild(createToken("property"));
state = 4;
break;
case "}":
node.appendChild(createToken("text"));
state = 0;
break;
default:
false
}
break;
case 4:
switch(c){
case ";":
node.appendChild(createToken("value"));
state = 3;
break;
case "}":
node.appendChild(createToken("value"));
state = 0;
break;
default:
false
}
break;
case 5:
switch(c){
case " ":
node.appendChild(createToken("atrule"));
state = 6;
default:
false
}
break;
case 6:
switch(c){
case ";":
case "{":
node.appendChild(createToken("atvalue"));
state = 0;
break;
default:
false
}
break
default:
false
}
pointer++
}
node.appendChild(createToken("text"));
token = "";
state = 0;
pointer = 0;
return
}
return this
})();
document.onreadystatechange = (function () { document.onreadystatechange = (function () {
if (document.readyState === "complete") { if (document.readyState === "complete") {
fetchWithType("html_resources/tagmap.json") fetchWithType("html_resources/tagmap.json")