Add simple syntax highlighting
This commit is contained in:
parent
aca3302c6f
commit
83a9a5da77
2 changed files with 135 additions and 2 deletions
|
@ -79,3 +79,10 @@ pre{
|
|||
.hidden{ display: none !important }
|
||||
|
||||
.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 }
|
|
@ -138,7 +138,8 @@ async function onCategoryClicked(categoryNode,isSecondary = false){
|
|||
async function onTargetClicked(targetNode){
|
||||
const codeBlock = document.querySelector("pre");
|
||||
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))
|
||||
}
|
||||
|
||||
|
@ -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 () {
|
||||
if (document.readyState === "complete") {
|
||||
fetchWithType("html_resources/tagmap.json")
|
||||
|
|
Loading…
Reference in a new issue