diff --git a/html_resources/main.css b/html_resources/main.css
index b10c632..aa5995d 100644
--- a/html_resources/main.css
+++ b/html_resources/main.css
@@ -78,4 +78,11 @@ pre{
.categoryList:not(.blurred)+.categoryList,
.hidden{ display: none !important }
-.target{ display: flex; justify-content: space-between }
\ No newline at end of file
+.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 }
\ No newline at end of file
diff --git a/html_resources/selector.js b/html_resources/selector.js
index c08cb93..a2707b8 100644
--- a/html_resources/selector.js
+++ b/html_resources/selector.js
@@ -138,7 +138,8 @@ async function onCategoryClicked(categoryNode,isSecondary = false){
async function onTargetClicked(targetNode){
const codeBlock = document.querySelector("pre");
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))
}
@@ -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 () {
if (document.readyState === "complete") {
fetchWithType("html_resources/tagmap.json")