diff options
| author | Akshay <[email protected]> | 2021-06-13 09:06:08 +0100 |
|---|---|---|
| committer | Akshay <[email protected]> | 2021-06-13 09:06:08 +0100 |
| commit | 1b3ccf6bd3c4c0aee08be924fd0180aac8e3ec54 (patch) | |
| tree | fd5d57a127cc2aed92f4f074f9a28b45b66832ef | |
| parent | 6efa08c1c0e044f6633e60dd4117c29eae39b516 (diff) | |
style cst to be more readable
| -rw-r--r-- | www/index.html | 13 | ||||
| -rw-r--r-- | 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 { | |||
| 60 | font-family: 'IBM Plex Mono', monospace; | 60 | font-family: 'IBM Plex Mono', monospace; |
| 61 | } | 61 | } |
| 62 | 62 | ||
| 63 | span.kind { | ||
| 64 | color: #a3aab6; | ||
| 65 | } | ||
| 66 | |||
| 67 | span.range { | ||
| 68 | font-size: 11px; | ||
| 69 | color: #a3aab688; | ||
| 70 | } | ||
| 71 | |||
| 72 | span.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 @@ | |||
| 1 | import {SynNode, put_cst} from "cstea"; | 1 | import {SynNode} from "cstea"; |
| 2 | import {EditorState, EditorView, basicSetup} from "@codemirror/basic-setup" | 2 | import {EditorState, EditorView, basicSetup} from "@codemirror/basic-setup" |
| 3 | import {Decoration, DecorationSet} from "@codemirror/view" | 3 | import {Decoration, DecorationSet} from "@codemirror/view" |
| 4 | import {StateField, StateEffect} from "@codemirror/state" | 4 | import {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 | ||
| 81 | function 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 | |||
| 81 | function wrap(s, tag) { | 102 | function wrap(s, tag) { |
| 82 | let t = document.createElement(tag); | 103 | let t = document.createElement(tag); |
| 83 | t.innerText = s; | 104 | t.innerText = s; |