Decent baseline syntax highlighting.

Author: jcreedcmu

assets/bundle.js

@@ -22994,21 +22994,27 @@
     maxTerm: 15,
     skippedNodes: [0, 1],
     repeatNodeCount: 1,
-    tokenData: "'|~RgXY!jYZ!j]^!jpq!jqr!{st!{tu!{uv$Vvw!{wx!{z}!{}!O!{!O!P%b!P![!{![!]%g!]!c!{!c!}%l#Q#o!{#p#q!{#r#s!{$g;'S!{;'S;=`$P<%lO!{~!oS]~XY!jYZ!j]^!jpq!j~#Q_U~qr!{st!{tu!{vw!{wx!{z}!{}!O!{!P![!{!]!}!{#Q#o!{#p#q!{#r#s!{$g;'S!{;'S;=`$P<%lO!{~$SP;=`<%l!{~$YTYZ$ipq$nuv$n!c!}%V#T#o%V~$nOP~~$sSP~OY$nZ;'S$n;'S;=`%P<%lO$n~%SP;=`<%l$n~%[QV~!c!}%V#T#o%V~%gOS~~%lOR~~%q_U~qr&pst&ptu&pvw&pwx&pz}&p}!O&p!P![&p!]!}&p#Q#o&p#p#q&p#r#s&p$g;'S&p;'S;=`'v<%lO&p~&w_T~U~qr&pst&ptu&pvw&pwx&pz}&p}!O&p!P![&p!]!}&p#Q#o&p#p#q&p#r#s&p$g;'S&p;'S;=`'v<%lO&p~'yP;=`<%l&p",
+    tokenData: "&x~RgXY!jYZ!j]^!jpq!jqr!{st!{tu!{uv$Vvw!{wx!{z}!{}!O!{!O!P%b!P![!{![!]%g!]!c!{!c!}%l#Q#o!{#p#q!{#r#s!{$g;'S!{;'S;=`$P<%lO!{~!oS]~XY!jYZ!j]^!jpq!j~#Q_U~qr!{st!{tu!{vw!{wx!{z}!{}!O!{!P![!{!]!}!{#Q#o!{#p#q!{#r#s!{$g;'S!{;'S;=`$P<%lO!{~$SP;=`<%l!{~$YTYZ$ipq$nuv$n!c!}%V#T#o%V~$nOP~~$sSP~OY$nZ;'S$n;'S;=`%P<%lO$n~%SP;=`<%l$n~%[QV~!c!}%V#T#o%V~%gOS~~%lOR~~%s_T~U~qr%lst%ltu%lvw%lwx%lz}%l}!O%l!P![%l!]!}%l#Q#o%l#p#q%l#r#s%l$g;'S%l;'S;=`&r<%lO%l~&uP;=`<%l%l",
     tokenizers: [0],
     topRules: { "File": [0, 2] },
     specialized: [{ term: 6, get: (value) => spec_Identifier[value] || -1 }],
     tokenPrec: 33
   });
 
   // src/twelf-mode.ts
+  var twelfHighlightStyle = HighlightStyle.define([
+    ...defaultHighlightStyle.specs,
+    { tag: tags.variableName, color: "#0a0" },
+    { tag: tags.atom, color: "#000" },
+    { tag: tags.comment, color: "#777", fontStyle: "italic" }
+  ]);
   var twelfLanguage = LRLanguage.define({
     name: "twelf",
     parser: parser.configure({
       props: [
         styleTags({
-          Identifier: tags.variableName,
-          FVar: tags.keyword,
+          Identifier: tags.atom,
+          FVar: tags.variableName,
           LineComment: tags.comment,
           Pragma: tags.keyword,
           Type: tags.keyword
@@ -23166,6 +23172,7 @@
     const editor = new EditorView({
       extensions: [
         basicSetup,
+        syntaxHighlighting(twelfHighlightStyle),
         twelf(),
         // These css tweaks came from the "See this example" in
         // https://discuss.codemirror.net/t/fill-a-div-with-the-editor/5248/2

assets/bundle.js.map

@@ -8,10 +8,11 @@
   Colon{':'} Period{'.'}
   identifierChar { $[-\!|#$&'*-,/-9;-Z^-z~\u{a1}-\u{10ffff}] }
   Identifier { identifierChar+ }
-  FVar { $[A-Z] identifierChar+ }
+  FVar { $[A-Z] identifierChar* }
   @precedence {FVar, Identifier}
   LineComment { (('% '|'%%') ![\n]*) | '%\n' }
   Pragma { '%' $[a-zA-Z]+ }
+
 }
 
 Arrow {

grammar/twelf.grammar

@@ -1,7 +1,8 @@
 import { EditorView, basicSetup } from "codemirror"
+import { syntaxHighlighting } from '@codemirror/language';
 import { decode, encode } from "./encoding";
 import { WasiSnapshotPreview1, args_get, args_sizes_get, clock_time_get, environ_sizes_get, fd_write } from "./wasi";
-import { twelf as twelfMode } from './twelf-mode';
+import { twelfHighlightStyle, twelf as twelfMode } from './twelf-mode';
 
 enum Status {
   OK = 0,
@@ -149,6 +150,7 @@ async function getWasm(url: string): Promise<ArrayBuffer> {
 function initEditor(): EditorView {
   const editor = new EditorView({
     extensions: [basicSetup,
+      syntaxHighlighting(twelfHighlightStyle),
       twelfMode(),
       // These css tweaks came from the "See this example" in
       // https://discuss.codemirror.net/t/fill-a-div-with-the-editor/5248/2

src/index.ts

@@ -1,15 +1,22 @@
 import { Extension } from "@codemirror/state"
-import { continuedIndent, indentNodeProp, foldNodeProp, foldInside, LRLanguage, LanguageSupport } from "@codemirror/language"
+import { defaultHighlightStyle, HighlightStyle, continuedIndent, indentNodeProp, foldNodeProp, foldInside, LRLanguage, LanguageSupport } from "@codemirror/language"
 import { parser } from './twelf-parser';
 import { styleTags, tags as t } from "@lezer/highlight";
 
+export const twelfHighlightStyle = HighlightStyle.define([
+  ...defaultHighlightStyle.specs,
+  { tag: t.variableName, color: "#0a0" },
+  { tag: t.atom, color: "#000" },
+  { tag: t.comment, color: "#777", fontStyle: "italic" }
+])
+
 export const twelfLanguage = LRLanguage.define({
   name: "twelf",
   parser: parser.configure({
     props: [
       styleTags({
-        Identifier: t.variableName,
-        FVar: t.keyword,
+        Identifier: t.atom,
+        FVar: t.variableName,
         LineComment: t.comment,
         Pragma: t.keyword,
         Type: t.keyword,

src/twelf-mode.ts

@@ -10,7 +10,7 @@ export const parser = LRParser.deserialize({
   maxTerm: 15,
   skippedNodes: [0,1],
   repeatNodeCount: 1,
-  tokenData: "'|~RgXY!jYZ!j]^!jpq!jqr!{st!{tu!{uv$Vvw!{wx!{z}!{}!O!{!O!P%b!P![!{![!]%g!]!c!{!c!}%l#Q#o!{#p#q!{#r#s!{$g;'S!{;'S;=`$P<%lO!{~!oS]~XY!jYZ!j]^!jpq!j~#Q_U~qr!{st!{tu!{vw!{wx!{z}!{}!O!{!P![!{!]!}!{#Q#o!{#p#q!{#r#s!{$g;'S!{;'S;=`$P<%lO!{~$SP;=`<%l!{~$YTYZ$ipq$nuv$n!c!}%V#T#o%V~$nOP~~$sSP~OY$nZ;'S$n;'S;=`%P<%lO$n~%SP;=`<%l$n~%[QV~!c!}%V#T#o%V~%gOS~~%lOR~~%q_U~qr&pst&ptu&pvw&pwx&pz}&p}!O&p!P![&p!]!}&p#Q#o&p#p#q&p#r#s&p$g;'S&p;'S;=`'v<%lO&p~&w_T~U~qr&pst&ptu&pvw&pwx&pz}&p}!O&p!P![&p!]!}&p#Q#o&p#p#q&p#r#s&p$g;'S&p;'S;=`'v<%lO&p~'yP;=`<%l&p",
+  tokenData: "&x~RgXY!jYZ!j]^!jpq!jqr!{st!{tu!{uv$Vvw!{wx!{z}!{}!O!{!O!P%b!P![!{![!]%g!]!c!{!c!}%l#Q#o!{#p#q!{#r#s!{$g;'S!{;'S;=`$P<%lO!{~!oS]~XY!jYZ!j]^!jpq!j~#Q_U~qr!{st!{tu!{vw!{wx!{z}!{}!O!{!P![!{!]!}!{#Q#o!{#p#q!{#r#s!{$g;'S!{;'S;=`$P<%lO!{~$SP;=`<%l!{~$YTYZ$ipq$nuv$n!c!}%V#T#o%V~$nOP~~$sSP~OY$nZ;'S$n;'S;=`%P<%lO$n~%SP;=`<%l$n~%[QV~!c!}%V#T#o%V~%gOS~~%lOR~~%s_T~U~qr%lst%ltu%lvw%lwx%lz}%l}!O%l!P![%l!]!}%l#Q#o%l#p#q%l#r#s%l$g;'S%l;'S;=`&r<%lO%l~&uP;=`<%l%l",
   tokenizers: [0],
   topRules: {"File":[0,2]},
   specialized: [{term: 6, get: (value) => spec_Identifier[value] || -1}],