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" } + } +}