2 files changed, 17 insertions, 7 deletions

diff --git a/www/index.html b/www/index.html
index 1404993..55127df 100644
--- a/www/index.html
+++ b/www/index.html
@@ -6,17 +6,25 @@
   </head>
   <style>
 .grid-container {
+  width: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-gap: 20px;
 }
 .syntax-node {
-  padding: 0px;
-  padding-left: 20px;
+  padding-left: 5px;
+  margin-left: 20px;
+  border-left: 2px solid white;
+}
+.syntax-node:hover {
+  border-left: 2px solid #ccc;
 }
 .syntax-err {
   color: red;
 }
+#cst, #source-code {
+  height: 100vh;
+  overflow: scroll;
+}
 pre {
   padding: 0px;
   margin: 0px
diff --git a/www/index.js b/www/index.js
index 52253c0..f870e92 100644
--- a/www/index.js
+++ b/www/index.js
@@ -32,6 +32,7 @@ const highlightField = StateField.define({
         add: [hlMark.range(e.value.from, e.value.to)]
       });
     }
+    return Decoration.none;
   },
   provide: f => EditorView.decorations.from(f)
 })
@@ -39,7 +40,9 @@ const highlightField = StateField.define({
 const hlMark = Decoration.mark({class: "cm-highlight"})
 
 const hlTheme = EditorView.baseTheme({
-  ".cm-highlight": { textDecoration: "underline 3px red" }
+  ".cm-highlight": {
+    backgroundColor: "#ff3299aa"
+  }
 })
 
 function highlightArea(view, textRange) {
@@ -54,9 +57,8 @@ function render_cst(synRoot) {
   let nodeDiv = document.createElement("div");
   nodeDiv.className = "syntax-node";
   let r = synRoot.range();
-  let synText = wrap(synRoot.text() + synRoot.range().to_string(), "pre");
+  let synText = wrap(synRoot.kind() + " @ " + r.to_string() + " " +synRoot.text(), "pre");
   synText.onmouseover = () => {
-    console.log(r.to_string());
     highlightArea(view, r);
   }
   nodeDiv.appendChild(synText);
@@ -79,7 +81,7 @@ function render_err(errorList) {
   errDiv.className = "syntax-err";
   errorList.forEach(err => {
     errDiv.appendChild(wrap(err.to_string(), "pre"));
-    highlightArea(view, err.range());
+    // highlightArea(view, err.range());
   });
   return errDiv;
 }