chore: Added syntax highlighting to docs site.

This commit is contained in:
Spencer Brower
2026-09-07 14:33:41 -04:00
parent 0612ba4453
commit 90ad86c914
4 changed files with 73 additions and 8 deletions
+60
View File
@@ -230,5 +230,65 @@ label.margin-toggle:not(.sidenote-number) {
} }
</style> </style>
{{/params.stylesheets}} {{/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}}<link rel="stylesheet" href="{{.|rel_url}}">
{{/params.stylesheets}} {{/params.stylesheets}}
+7 -5
View File
@@ -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 :/ --> <!-- TODO: It might be a terrible idea to combine mustache templates with shell scripts :/ -->
```json ```json5
// thor.json // thor.json
{ {
"tools": { "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. 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 // thor.json
{ {
"tools": { "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. 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 ```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. 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 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 Simpler is Better
+1 -1
View File
@@ -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` Let's make a home page - copy the following text and place it into `./index.md`
```md ```markdown
# Hello, World! # Hello, World!
Welcome to your new site. Welcome to your new site.
+5 -2
View File
@@ -4,7 +4,8 @@
"format": "January 2, 2006" "format": "January 2, 2006"
}, },
"markdown_extensions": { "markdown_extensions": {
"footnotes": true "footnotes": true,
"highlight": true
}, },
"menus": { "menus": {
"main": [ "main": [
@@ -23,5 +24,7 @@
"https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.blue.min.css", "https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.blue.min.css",
"/css/main.css" "/css/main.css"
] ]
} },
"grammars": "~/.config/helix/runtime/grammars/",
"queries": "/nix/store/n9da8d007ygbgsx983jr3ar3wb1fsh6q-helix-25.07.1/lib/runtime/queries"
} }