Add simple syntax highlighting
This commit is contained in:
parent
aca3302c6f
commit
83a9a5da77
2 changed files with 135 additions and 2 deletions
|
@ -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 }
|
|
@ -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")
|
||||||
|
|
Loading…
Reference in a new issue