fenced code syntax highlightingHEADmain

2 files changed, 15 insertions, 0 deletions

diff --git a/site.tmpl b/site.tmpl
index ee0a62b..b20a6e6 100644
--- a/site.tmpl
+++ b/site.tmpl
@@ -47,6 +47,10 @@
 </html>
 {{end}}
 
+{{define "markdown/fenced_code_block" -}}
+<pre class="chroma"><code class="language-{{.Language}}">{{if .HighlightedContent}}{{.HighlightedContent}}{{else}}{{.Content}}{{end}}</code></pre>
+{{end}}
+
 {{define "page" -}}
 {{template "head" .}}
 {{template "header" .}}
diff --git a/style.css b/style.css
index 1ad8c5a..dbe8626 100644
--- a/style.css
+++ b/style.css
@@ -3,6 +3,8 @@
 :root{
   --bg:#f4f4f1; --fg:#232322; --muted:#77776f; --rule:#d8d8d1;
   --accent:#2f6f4f; --accent-hover:#1f513a; --card:#ecece7;
+  --syntax-keyword:#7a3e9d; --syntax-name:#26658c; --syntax-builtin:#9a5318;
+  --syntax-string:#39733f; --syntax-number:#9a4167;
   --measure:46rem;
   --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
   --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
@@ -11,6 +13,8 @@
   :root{
     --bg:#131413; --fg:#d7d9d2; --muted:#82857b; --rule:#2a2c28;
     --accent:#6fbf93; --accent-hover:#8fd6ac; --card:#1b1d1a;
+    --syntax-keyword:#c792ea; --syntax-name:#82aaff; --syntax-builtin:#ffcb6b;
+    --syntax-string:#c3e88d; --syntax-number:#f78c6c;
   }
 }
 
@@ -103,6 +107,13 @@ article.post code{background:var(--card); padding:.1rem .35rem; border-radius:3p
 article.post pre{background:var(--card); border:1px solid var(--rule); border-radius:6px;
   padding:1rem 1.1rem; overflow-x:auto; font-size:.86rem; line-height:1.55;}
 article.post pre code{background:none; padding:0;}
+.chroma [class^="chroma-k"]{color:var(--syntax-keyword); font-weight:600;}
+.chroma [class^="chroma-n"]{color:var(--syntax-name);}
+.chroma .chroma-nb{color:var(--syntax-builtin);}
+.chroma [class^="chroma-s"]{color:var(--syntax-string);}
+.chroma [class^="chroma-m"]{color:var(--syntax-number);}
+.chroma [class^="chroma-o"]{color:var(--syntax-keyword);}
+.chroma [class^="chroma-c"]{color:var(--muted); font-style:italic;}
 article.post a{text-underline-offset:3px;}
 .post-nav{display:flex; justify-content:space-between; gap:1rem; margin-top:2.4rem;
   padding-top:1.2rem; border-top:1px dashed var(--rule); font-size:.9rem;}