support highlighting important and function values

This commit is contained in:
MrOtherGuy 2021-06-18 10:06:25 +03:00
parent a9f10e07ea
commit f958ec293a
2 changed files with 84 additions and 46 deletions

View file

@ -96,12 +96,14 @@ pre > div{
.pseudo{ color: silver } .pseudo{ color: silver }
.id{ color: rgb(240, 148, 138) } .id{ color: rgb(240, 148, 138) }
.class{ color: skyblue } .class{ color: skyblue }
.attribute{ color: rgb(210,120,190) } .attribute{ color: rgb(120,230,170) }
.atrule{ color: lime } .atrule{ color: lime }
.atvalue{ color: lightblue } .atvalue{ color: lightblue }
.property{ color: palegoldenrod } .property{ color: palegoldenrod }
.value{ color: skyblue } .value{ color: skyblue }
.curly{ color: magenta } .curly{ color: magenta }
.function{ color: silver }
.important-tag{ color: orange }
@keyframes showDelayed{ from{ visibility: hidden } to{ visibility: visibile }} @keyframes showDelayed{ from{ visibility: hidden } to{ visibility: visibile }}

View file

@ -273,54 +273,70 @@ const Highlighter = new(function(){
} }
let n = document.createElement("span"); let n = document.createElement("span");
switch(type){
case "selector":
let parts = token.split(/([\.#:\[]\w[\w-_"'=\]]*|\s\w[\w-_"'=\]]*)/);
if(type==="selector"){ for(let part of parts){
if(part.length === 0){
let parts = token.split(/([\.#:\[]\w[\w-_"'=\]]*|\s\w[\w-_"'=\]]*)/); continue
}
for(let part of parts){ let c = part[0];
if(part.length === 0){ switch (c){
continue case ":":
case "#":
case "[":
case ".":
let p = n.appendChild(document.createElement("span"));
p.className = selectorToClassMap.get(c);
p.textContent = part;
break;
default:
n.append(part);
}
} }
let c = part[0]; break
switch (c){ case "comment":
case ":": let linksToFile = token.match(/[\w-\.]+\.css/g);
case "#": if(linksToFile && linksToFile.length){
case "[": let linkIdx = 0;
case ".": let fromIdx = 0;
let p = n.appendChild(document.createElement("span")); while(linkIdx < linksToFile.length){
p.className = selectorToClassMap.get(c); let part = linksToFile[linkIdx++];
p.textContent = part; let idx = token.indexOf(part);
break; n.append(token.substring(fromIdx,idx));
default: let link = document.createElement("a");
n.append(part); link.textContent = part;
link.href = `https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/${part}`;
link.target = "_blank";
n.appendChild(link);
fromIdx = idx + part.length;
}
n.append(token.substring(fromIdx));
}else{
n.textContent = c || token;
} }
} break;
case "value":
let startImportant = token.indexOf("!");
} else if(type === "comment"){ if(startImportant === -1){
let linksToFile = token.match(/[\w-\.]+\.css/g); n.textContent = c || token;
if(linksToFile && linksToFile.length){ }else{
let linkIdx = 0; n.textContent = token.substr(0,startImportant);
let fromIdx = 0; let importantTag = document.createElement("span");
while(linkIdx < linksToFile.length){ importantTag.className = "important-tag";
let part = linksToFile[linkIdx++]; importantTag.textContent = "!important";
let idx = token.indexOf(part); n.appendChild(importantTag);
n.append(token.substring(fromIdx,idx)); if(token.length > (9 + startImportant)){
let link = document.createElement("a"); n.append(";")
link.textContent = part; }
link.href = `https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/${part}`;
link.target = "_blank";
n.appendChild(link);
fromIdx = idx + part.length;
} }
n.append(token.substring(fromIdx)); break;
}else{ case "function":
n.textContent = c || token n.textContent = c || token.slice(0,-1);
} break
} default:
else{ n.textContent = c || token;
n.textContent = c || token;
} }
n.className = (`token ${type}`); n.className = (`token ${type}`);
@ -330,9 +346,11 @@ const Highlighter = new(function(){
} }
let c; let c;
let functionValueLevel = 0;
let curly = false; let curly = false;
while(pointer < text.length){ while(pointer < text.length){
c = text[pointer]; c = text[pointer];
const currentState = state.now(); const currentState = state.now();
curly = currentState != 2 && (c === "{" || c === "}"); curly = currentState != 2 && (c === "{" || c === "}");
if(!curly){ if(!curly){
@ -402,6 +420,11 @@ const Highlighter = new(function(){
case "}": case "}":
createElementFromToken("value"); createElementFromToken("value");
state.set(0); state.set(0);
break;
case "(":
createElementFromToken("value");
functionValueLevel++;
state.set(7);
} }
break; break;
case 5: case 5:
@ -419,13 +442,26 @@ const Highlighter = new(function(){
state.set(0); state.set(0);
} }
break break
case 7:
switch(c){
case ")":
functionValueLevel--;
if(functionValueLevel === 0){
createElementFromToken("function");
token = ")";
state.set(4);
}
break;
case "}":
functionValueLevel = 0;
state.set(0)
}
default: default:
false false
} }
curly && createElementFromToken("curly",c); curly && createElementFromToken("curly",c);
pointer++ pointer++
} }
createElementFromToken("text"); createElementFromToken("text");