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,9 +273,8 @@ const Highlighter = new(function(){
} }
let n = document.createElement("span"); let n = document.createElement("span");
switch(type){
if(type==="selector"){ case "selector":
let parts = token.split(/([\.#:\[]\w[\w-_"'=\]]*|\s\w[\w-_"'=\]]*)/); let parts = token.split(/([\.#:\[]\w[\w-_"'=\]]*|\s\w[\w-_"'=\]]*)/);
for(let part of parts){ for(let part of parts){
@ -296,9 +295,8 @@ const Highlighter = new(function(){
n.append(part); n.append(part);
} }
} }
break
case "comment":
} else if(type === "comment"){
let linksToFile = token.match(/[\w-\.]+\.css/g); let linksToFile = token.match(/[\w-\.]+\.css/g);
if(linksToFile && linksToFile.length){ if(linksToFile && linksToFile.length){
let linkIdx = 0; let linkIdx = 0;
@ -316,10 +314,28 @@ const Highlighter = new(function(){
} }
n.append(token.substring(fromIdx)); n.append(token.substring(fromIdx));
}else{ }else{
n.textContent = c || token n.textContent = c || token;
}
break;
case "value":
let startImportant = token.indexOf("!");
if(startImportant === -1){
n.textContent = c || token;
}else{
n.textContent = token.substr(0,startImportant);
let importantTag = document.createElement("span");
importantTag.className = "important-tag";
importantTag.textContent = "!important";
n.appendChild(importantTag);
if(token.length > (9 + startImportant)){
n.append(";")
} }
} }
else{ break;
case "function":
n.textContent = c || token.slice(0,-1);
break
default:
n.textContent = c || token; n.textContent = c || token;
} }
@ -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");