aboutsummaryrefslogtreecommitdiff
path: root/www
diff options
context:
space:
mode:
authorAkshay <[email protected]>2021-06-13 09:06:08 +0100
committerAkshay <[email protected]>2021-06-13 09:06:08 +0100
commit1b3ccf6bd3c4c0aee08be924fd0180aac8e3ec54 (patch)
treefd5d57a127cc2aed92f4f074f9a28b45b66832ef /www
parent6efa08c1c0e044f6633e60dd4117c29eae39b516 (diff)
style cst to be more readable
Diffstat (limited to 'www')
-rw-r--r--www/index.html13
-rw-r--r--www/index.js25
2 files changed, 36 insertions, 2 deletions
diff --git a/www/index.html b/www/index.html
index 36e30c7..8c11955 100644
--- a/www/index.html
+++ b/www/index.html
@@ -60,6 +60,19 @@ pre {
60 font-family: 'IBM Plex Mono', monospace; 60 font-family: 'IBM Plex Mono', monospace;
61} 61}
62 62
63span.kind {
64 color: #a3aab6;
65}
66
67span.range {
68 font-size: 11px;
69 color: #a3aab688;
70}
71
72span.token-text {
73 color: #98c379;
74}
75
63 </style> 76 </style>
64 <body> 77 <body>
65 <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript> 78 <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
diff --git a/www/index.js b/www/index.js
index f98a48b..ec95f70 100644
--- a/www/index.js
+++ b/www/index.js
@@ -1,4 +1,4 @@
1import {SynNode, put_cst} from "cstea"; 1import {SynNode} from "cstea";
2import {EditorState, EditorView, basicSetup} from "@codemirror/basic-setup" 2import {EditorState, EditorView, basicSetup} from "@codemirror/basic-setup"
3import {Decoration, DecorationSet} from "@codemirror/view" 3import {Decoration, DecorationSet} from "@codemirror/view"
4import {StateField, StateEffect} from "@codemirror/state" 4import {StateField, StateEffect} from "@codemirror/state"
@@ -63,7 +63,7 @@ function render_cst(synRoot) {
63 let nodeDiv = document.createElement("div"); 63 let nodeDiv = document.createElement("div");
64 nodeDiv.className = "syntax-node"; 64 nodeDiv.className = "syntax-node";
65 let r = synRoot.range(); 65 let r = synRoot.range();
66 let synText = wrap(synRoot.kind() + " @ " + r.to_string() + " " +synRoot.text(), "pre"); 66 let synText = synTextHtml(synRoot);
67 synText.onmouseover = () => { 67 synText.onmouseover = () => {
68 highlightArea(view, r); 68 highlightArea(view, r);
69 let sourceFile = view.state.doc.toString(); 69 let sourceFile = view.state.doc.toString();
@@ -78,6 +78,27 @@ function render_cst(synRoot) {
78 return nodeDiv; 78 return nodeDiv;
79} 79}
80 80
81function synTextHtml(node) {
82 let kind = document.createElement("span");
83 kind.innerText = ` ${node.kind()} `
84 kind.className = "kind";
85
86 let text = document.createElement("span");
87 text.innerText = ` ${node.text()} `
88 text.className = "token-text";
89
90 let range = document.createElement("span");
91 range.innerText = ` ${node.range().to_string()} `
92 range.className = "range";
93
94 let d = document.createElement("div");
95 d.appendChild(kind);
96 d.appendChild(text);
97 d.appendChild(range);
98
99 return d;
100}
101
81function wrap(s, tag) { 102function wrap(s, tag) {
82 let t = document.createElement(tag); 103 let t = document.createElement(tag);
83 t.innerText = s; 104 t.innerText = s;