Make highlighter create separate ruleset elements

This commit is contained in:
MrOtherGuy 2021-06-18 10:42:04 +03:00
parent f958ec293a
commit a7a306f2a6
2 changed files with 14 additions and 3 deletions

View file

@ -93,7 +93,7 @@ pre > div{
.comment{ color: rgb(50,180,90) }
.selector{ color: silver }
.pseudo{ color: silver }
.pseudo{ color: violet }
.id{ color: rgb(240, 148, 138) }
.class{ color: skyblue }
.attribute{ color: rgb(120,230,170) }

View file

@ -266,7 +266,16 @@ const Highlighter = new(function(){
clearCodeBlock();
let node = document.createElement("div");
function createNewRuleset(){
let ruleset = document.createElement("span");
ruleset.className = "ruleset";
node.appendChild(ruleset);
return ruleset
}
let rulesetUnderConstruction = createNewRuleset();
function createElementFromToken(type,c){
if(token.length === 0 && !c){
return
@ -275,6 +284,8 @@ const Highlighter = new(function(){
switch(type){
case "selector":
// This isn't exactly correct, but it works because parser treats \r\n sequences that follow a closed comment as "selector"
rulesetUnderConstruction = createNewRuleset();
let parts = token.split(/([\.#:\[]\w[\w-_"'=\]]*|\s\w[\w-_"'=\]]*)/);
for(let part of parts){
@ -341,7 +352,7 @@ const Highlighter = new(function(){
n.className = (`token ${type}`);
token = "";
node.appendChild(n);
rulesetUnderConstruction.appendChild(n);
return
}