From 90ad86c91487ae9013321fc3a303e24a989a2e3a Mon Sep 17 00:00:00 2001
From: Spencer Brower <6729162+sbrow@users.noreply.github.com>
Date: Mon, 7 Sep 2026 14:24:52 -0400
Subject: [PATCH] chore: Added syntax highlighting to docs site.

---
 defaults/layouts/partials/styles.html | 60 +++++++++++++++++++++++++++
 site/content/docs.md                  | 12 +++---
 site/content/guide.md                 |  2 +-
 site/thor.json                        |  7 +++-
 4 files changed, 73 insertions(+), 8 deletions(-)

diff --git a/defaults/layouts/partials/styles.html b/defaults/layouts/partials/styles.html
index 356ed90..3d1a4ec 100644
--- a/defaults/layouts/partials/styles.html
+++ b/defaults/layouts/partials/styles.html
@@ -230,5 +230,65 @@ label.margin-toggle:not(.sidenote-number) {
 }
 </style>
 {{/params.stylesheets}}
+<style>
+/* Syntax highlighting. Build-time <span class="hl-*"> wrappers only appear
+   inside fenced code blocks. The base class (e.g. hl-keyword) is always
+   emitted alongside any dotted variant (hl-keyword-control), so styling the
+   base names covers every capture. Re-theme by overriding the --hl-* vars. */
+:root {
+  --hl-bg:        #282c34;
+  --hl-fg:        #abb2bf;
+  --hl-comment:   #5c6370;
+  --hl-keyword:   #c678dd;
+  --hl-string:    #98c379;
+  --hl-escape:    #56b6c2;
+  --hl-number:    #d19a66;
+  --hl-function:  #61afef;
+  --hl-type:      #e5c07b;
+  --hl-variable:  #e06c75;
+  --hl-attribute: #d19a66;
+}
+
+pre:has(> code [class^="hl-"]) {
+  background: var(--hl-bg);
+  color: var(--hl-fg);
+  padding: 0.75rem 1rem;
+  border-radius: 4px;
+}
+
+.hl-comment { color: var(--hl-comment); font-style: italic; }
+.hl-keyword,
+.hl-conditional,
+.hl-repeat,
+.hl-exception,
+.hl-include,
+.hl-storageclass { color: var(--hl-keyword); }
+.hl-operator,
+.hl-punctuation { color: var(--hl-fg); }
+.hl-string,
+.hl-character { color: var(--hl-string); }
+.hl-escape,
+.hl-string-escape,
+.hl-string-special { color: var(--hl-escape); }
+.hl-number,
+.hl-float,
+.hl-boolean,
+.hl-constant { color: var(--hl-number); }
+.hl-function,
+.hl-method,
+.hl-constructor { color: var(--hl-function); }
+.hl-type,
+.hl-namespace,
+.hl-module { color: var(--hl-type); }
+.hl-variable,
+.hl-property,
+.hl-field,
+.hl-parameter,
+.hl-tag,
+.hl-symbol { color: var(--hl-variable); }
+.hl-attribute,
+.hl-label,
+.hl-preproc { color: var(--hl-attribute); }
+</style>
 {{#params.stylesheets}}<link rel="stylesheet" href="{{.|rel_url}}">
 {{/params.stylesheets}}
diff --git a/site/content/docs.md b/site/content/docs.md
index aeb39e5..09a96b0 100644
--- a/site/content/docs.md
+++ b/site/content/docs.md
@@ -617,7 +617,7 @@ Essentially, each tool is just a bash-style commandline string with a few specia
 
 <!-- TODO: It might be a terrible idea to combine mustache templates with shell scripts :/ -->
 
-```json
+```json5
 // thor.json
 {
 	"tools": {
@@ -629,7 +629,7 @@ Essentially, each tool is just a bash-style commandline string with a few specia
 
 Both `{{in}}` and `{{out}}` exist to support tools that can't read  from `stdin` and/or can't write to `stdout`. If your tool can do those things, it is ***highly recommended*** to avoid `{{in}}` + `{{out}}`, as each requires thor to make **a full round-trip** to the file system, rather than keeping everything in memory.
 
-```json
+```json5
 // thor.json
 {
 	"tools": {
@@ -661,7 +661,7 @@ Both `{{in}}` and `{{out}}` exist to support tools that can't read  from `stdin`
 Thor supports [Open Graph](https://ogp.me/) tags, allowing you to customize how your site looks when linked to on social media or in apps like Discord. It is accessible through the `{{>opengraph}}` template, which should be automatically included in your header by your theme.
 
 ```html
-TODO: {{>opengraph shorcode here}}
+TODO: {{opengraph shorcode here}}
 ```
 
 The options are sourced [using the context stack], first from your page frontmatter, and then from your site config. Thor will attempt to infer as much information as possible, to keep you from needing to set them explictly.
@@ -693,9 +693,11 @@ TODO: Modules
 
 TODO: Themes
 
-## Zen
 
-> The guding principals behind Thor.
+<hgroup>
+  <h2 id="zen">Zen</h2>
+  <p>The guding principals behind Thor.</p>
+</hgroup>
 
 Simpler is Better
 
diff --git a/site/content/guide.md b/site/content/guide.md
index 8dbd1fc..74d79f8 100644
--- a/site/content/guide.md
+++ b/site/content/guide.md
@@ -17,7 +17,7 @@ At the heart of any good SSG is the content files. Thor supports markdown (`.md`
 
 Let's make a home page - copy the following text and place it into `./index.md`
 
-```md
+```markdown
 # Hello, World! 
 
 Welcome to your new site. 
diff --git a/site/thor.json b/site/thor.json
index 8960571..fa944d4 100644
--- a/site/thor.json
+++ b/site/thor.json
@@ -4,7 +4,8 @@
     "format": "January 2, 2006"
   },
   "markdown_extensions": {
-    "footnotes": true
+    "footnotes": true,
+    "highlight": true
   },
   "menus": {
     "main": [
@@ -23,5 +24,7 @@
       "https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.blue.min.css",
       "/css/main.css"
     ]
-  }
+  },
+  "grammars": "~/.config/helix/runtime/grammars/",
+  "queries": "/nix/store/n9da8d007ygbgsx983jr3ar3wb1fsh6q-helix-25.07.1/lib/runtime/queries"
 }
\ No newline at end of file