From 1b3ccf6bd3c4c0aee08be924fd0180aac8e3ec54 Mon Sep 17 00:00:00 2001 From: Akshay Date: Sun, 13 Jun 2021 13:36:08 +0530 Subject: style cst to be more readable --- www/index.html | 13 +++++++++++++ www/index.js | 25 +++++++++++++++++++++++-- 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 { font-family: 'IBM Plex Mono', monospace; } +span.kind { + color: #a3aab6; +} + +span.range { + font-size: 11px; + color: #a3aab688; +} + +span.token-text { + color: #98c379; +} + 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 @@ -import {SynNode, put_cst} from "cstea"; +import {SynNode} from "cstea"; import {EditorState, EditorView, basicSetup} from "@codemirror/basic-setup" import {Decoration, DecorationSet} from "@codemirror/view" import {StateField, StateEffect} from "@codemirror/state" @@ -63,7 +63,7 @@ function render_cst(synRoot) { let nodeDiv = document.createElement("div"); nodeDiv.className = "syntax-node"; let r = synRoot.range(); - let synText = wrap(synRoot.kind() + " @ " + r.to_string() + " " +synRoot.text(), "pre"); + let synText = synTextHtml(synRoot); synText.onmouseover = () => { highlightArea(view, r); let sourceFile = view.state.doc.toString(); @@ -78,6 +78,27 @@ function render_cst(synRoot) { return nodeDiv; } +function synTextHtml(node) { + let kind = document.createElement("span"); + kind.innerText = ` ${node.kind()} ` + kind.className = "kind"; + + let text = document.createElement("span"); + text.innerText = ` ${node.text()} ` + text.className = "token-text"; + + let range = document.createElement("span"); + range.innerText = ` ${node.range().to_string()} ` + range.className = "range"; + + let d = document.createElement("div"); + d.appendChild(kind); + d.appendChild(text); + d.appendChild(range); + + return d; +} + function wrap(s, tag) { let t = document.createElement(tag); t.innerText = s; -- cgit v1.2.3