Implement styling

numbat-wasm/src/jquery_terminal_formatter.rs

@@ -15,18 +15,19 @@ impl Formatter for JqueryTerminalFormatter {
         &self,
         FormattedString(_output_type, format_type, s): &FormattedString,
     ) -> String {
-        match format_type {
-            FormatType::Whitespace => format!("{s}"),
-            FormatType::Dimmed => format!("{s}"),
-            FormatType::Text => format!("{s}"),
-            FormatType::String => jt_format("emphasized", s),
-            FormatType::Keyword => format!("{s}"),
-            FormatType::Value => jt_format("value", s),
-            FormatType::Unit => format!("{s}"),
-            FormatType::Identifier => format!("{s}"),
-            FormatType::TypeIdentifier => format!("{s}"),
-            FormatType::Operator => jt_format("emphasized", s),
-            FormatType::Decorator => format!("{s}"),
-        }
+        let css_class = match format_type {
+            FormatType::Whitespace => return s.clone(),
+            FormatType::Dimmed => "dimmed",
+            FormatType::Text => return s.clone(),
+            FormatType::String => "string",
+            FormatType::Keyword => "keyword",
+            FormatType::Value => "value",
+            FormatType::Unit => "unit",
+            FormatType::Identifier => "identifier",
+            FormatType::TypeIdentifier => "type-identifier",
+            FormatType::Operator => "operator",
+            FormatType::Decorator => "decorator",
+        };
+        jt_format(&css_class, s)
     }
 }

numbat-wasm/src/wasm_importer.rs

@@ -7,6 +7,8 @@ pub struct WasmImporter {}
 
 impl ModuleImporter for WasmImporter {
     fn import(&self, path: &ModulePath) -> Option<(String, Option<PathBuf>)> {
+        // TODO: yeah, this is not great.
+
         let path = path.to_string();
         let code = match path.as_str() {
             "core::dimensions" => include_str!("../../modules/core/dimensions.nbt"),

numbat-wasm/www/index.js

@@ -62,10 +62,6 @@ function interpret(line) {
   return output;
 }
 
-function emph(str) {
-  return "[[;;;hl-emphasized]" + str + "]";
-}
-
 function colored(col, str) {
   return "[[;#" + col + ";]" + str + "]";
 }

numbat-wasm/www/main.css

@@ -91,27 +91,39 @@ p.links a {
 
 /* syntax highlighting */
 
-.hl-emphasized {
-    font-weight: 700 !important;
+.hl-dimmed {
+    color: #3e3e3e !important;
 }
 
-.hl-error {
-    color: #F92672 !important;
+.hl-string {
+    color: #1f9829 !important;
+}
+
+.hl-keyword {
+    font-weight: 700 !important;
+    color: #f03495 !important;
 }
 
 .hl-value {
-    color: #66D9EF !important;
+    color: #dba717 !important;
 }
 
-.hl-identifier {
-    color: #FD971F !important;
+.hl-unit {
+    color: #1d9ecd !important;
 }
 
-.hl-function {
+.hl-identifier {}
+
+.hl-type-identifier {
+    color: #1d4fba !important;
     font-style: italic !important;
 }
 
-.hl-unit {
+.hl-operator {
+    font-weight: 700 !important;
+}
+
+.hl-decorator {
     color: #A6E22E !important;
 }