From 126579699624009fcf884a9bb1e1c58d1c5d6060 Mon Sep 17 00:00:00 2001
From: lqdev <liquidev@tutanota.com>
Date: Tue, 12 Mar 2024 20:03:00 +0100
Subject: [PATCH] add json syntax

---
 .../treehouse/dev/syntax-highlighting.tree    | 46 +++++++++++++++++--
 static/css/main.css                           |  4 ++
 static/syntax/json.json                       | 17 +++++++
 3 files changed, 64 insertions(+), 3 deletions(-)
 create mode 100644 static/syntax/json.json

diff --git a/content/treehouse/dev/syntax-highlighting.tree b/content/treehouse/dev/syntax-highlighting.tree
index edf91a8..167ac45 100644
--- a/content/treehouse/dev/syntax-highlighting.tree
+++ b/content/treehouse/dev/syntax-highlighting.tree
@@ -1,12 +1,16 @@
 %% title = "syntax highlighting gallery"
 
+% id = "01HRT0DG7VSMZCX4PPCKE3ZCKN"
 - this is a page demonstrating syntaxes supported by the treehouse
 
+    % id = "01HRT0DG7VF31P185J898QQH85"
     - really there's not much more to it, but I use it for debugging + with it you can get a general feel for how I highlight things in the treehouse
 
+% id = "01HRT0DG7VN5TH971H7W8AT8YY"
 - `javascript`
 
-    - patterns:
+    % id = "01HRT0DG7V9PAY44NMYVMF7B63"
+    - patterns
     ```javascript
     // This is a single-line comment.
     /* This is
@@ -21,7 +25,8 @@
     , ;
     ```
 
-    - keywords:
+    % id = "01HRT0DG7VM2MV9YA5D694WA8Y"
+    - keywords
     ```javascript
     as async await break case catch class const continue debugger default delete do else export
     extends finally for from function get if import in instanceof let new of return set static
@@ -32,7 +37,8 @@
     false true undefined null
     ```
 
-    - sample code:
+    % id = "01HRT0DG7VA7MA87JR7MGQW294"
+    - sample code
     ```javascript
     // t is an existing tile index; variable name is short for brevity
     export function removeRedundancies(t) {
@@ -51,3 +57,37 @@
         return t;
     }
     ```
+
+    % id = "01HRT0DG7V51ENS54V2QFEAAF0"
+    + edge cases
+
+        % id = "01HRT0DG7VHX3VJ861W5VF0FNP"
+        - ```javascript
+        "cause i don't need"
+        many_words "many words"
+
+        'how can we connect this way'
+        when_i_dont_understand 'the words you say'
+        ```
+        ```javascript
+        hello "string\"escape" world
+        ```
+
+        this one is tricky because it requires a whopping five backslashes in the JSON syntax definition, and I initially had the pattern defined as:
+        ```json
+        { "regex": "\"(\\\"|[^\"])*\"", "is": "string" }
+        ```
+        which produced the following regex:
+        ```regex
+        "(\"|[^"])*"
+        ```
+        escaping the `"` in the process, therefore producing the following regex:
+        ```regex
+        "("|[^"])*"
+        ```
+        which can be reduced to:
+        ```regex
+        "([^])*"
+        ```
+
+        note that `[^]` is not the same as `.`, because the latter omits newlines.
diff --git a/static/css/main.css b/static/css/main.css
index 441e91c..8568610 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -776,6 +776,10 @@ th-literate-program[data-mode="output"] {
         color: var(--syntax-punct);
     }
 
+    &.error {
+        color: var(--error-color);
+        text-decoration: wavy underline;
+    }
 }
 
 .th-syntax-highlighting {
diff --git a/static/syntax/json.json b/static/syntax/json.json
new file mode 100644
index 0000000..9d24f26
--- /dev/null
+++ b/static/syntax/json.json
@@ -0,0 +1,17 @@
+{
+    "patterns": [
+        { "regex": "[a-zA-Z_][a-zA-Z0-9_]*", "is": "error" },
+        { "regex": "[0-9_]+(\\.[0-9_]*([eE][-+]?[0-9_]+)?)?", "is": "literal" },
+        {
+            "regex": "\"(\\\\\"|[^\"])*\"(:)",
+            "is": { "default": "keyword2", "captures": ["keyword2", "punct"] }
+        },
+        { "regex": "\"(\\\\\"|[^\"])*\"", "is": "string" },
+        { "regex": "[,]", "is": "punct" }
+    ],
+    "keywords": {
+        "null": { "into": "literal" },
+        "true": { "into": "literal" },
+        "false": { "into": "literal" }
+    }
+}