support highlighting important and function values
This commit is contained in:
parent
a9f10e07ea
commit
f958ec293a
2 changed files with 84 additions and 46 deletions
|
@ -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 }}
|
||||||
|
|
||||||
|
|
|
@ -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");
|
||||||
|
|
Loading…
Reference in a new issue