From fd0addf61ccc4eccaf213eeb55af1420f242ec85 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sun, 18 Jan 2026 00:11:12 -0800
Subject: [PATCH] Update website to use Zola 0.22 with new code block syntax
 highlighting

---
 .github/workflows/website.yml            |  2 +-
 website/.gitignore                       |  1 -
 website/config.toml                      |  9 +--
 website/sass/component/code-snippet.scss | 85 ++++--------------------
 website/templates/book.html              |  1 -
 5 files changed, 17 insertions(+), 81 deletions(-)

diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml
index 9cd80085..9a5f6349 100644
--- a/.github/workflows/website.yml
+++ b/.github/workflows/website.yml
@@ -37,7 +37,7 @@ jobs:
       - name: 🕸 Install Zola
         uses: taiki-e/install-action@v2
         with:
-          tool: zola@0.20.0
+          tool: zola@0.22.0
 
       - name: 🔍 Check if `website/other` directory changed
         uses: dorny/paths-filter@v3
diff --git a/website/.gitignore b/website/.gitignore
index 0fc0af5d..0fae7a6d 100644
--- a/website/.gitignore
+++ b/website/.gitignore
@@ -1,5 +1,4 @@
 node_modules/
 public/
 static/fonts/
-static/syntax-highlighting.css
 static/text-balancer.js
diff --git a/website/config.toml b/website/config.toml
index 9a171fd4..c46d64a2 100644
--- a/website/config.toml
+++ b/website/config.toml
@@ -6,12 +6,9 @@ feed_filenames = ["rss.xml"]
 compile_sass = true
 minify_html = false
 
-[markdown]
-highlight_code = true
-highlight_theme = "css"
-highlight_themes_css = [
-	{ theme = "kronuz", filename = "syntax-highlighting.css" },
-]
+[markdown.highlighting]
+error_on_missing_language = false
+theme = "gruvbox-dark-soft"
 
 [extra]
 # Put all your custom variables here
diff --git a/website/sass/component/code-snippet.scss b/website/sass/component/code-snippet.scss
index 66650d91..ebed7933 100644
--- a/website/sass/component/code-snippet.scss
+++ b/website/sass/component/code-snippet.scss
@@ -21,86 +21,27 @@ pre {
 
 	// Container for the element (span or table) containing the lines of code
 	code {
-		background: initial;
+		background: inherit;
 		color: inherit;
 		display: block;
 		overflow-x: auto;
-		padding: 20px;
-		width: 0;
+		padding: 10px 20px;
 		flex: 1 1 auto;
-	}
+		width: 0;
 
-	// Language name in top right corner
-	&[data-lang] {
-		padding-top: 28px;
-
-		&::before {
-			content: attr(data-lang);
-			color: rgba(var(--color-seaside-rgb), 0.5);
-			text-transform: lowercase;
-			font-family: "Inter Variable", sans-serif;
-			font-size: 0.75em;
-			font-weight: 700;
-			font-style: italic;
-			-webkit-user-select: none;
-			user-select: none;
-			pointer-events: none;
-			position: fixed;
-			top: 0;
-			line-height: 28px;
-			display: block;
+		.giallo-l {
+			display: inline-block;
+			min-height: 1lh;
 			width: 100%;
-			text-indent: 20px;
-			background: rgba(0, 0, 0, 0.25);
-
-			&[data-lang="sh"] {
-				content: "Shell";
-			}
-
-			&[data-lang="rs"] {
-				content: "Rust";
-			}
-
-			&[data-lang="js"] {
-				content: "JavaScript";
-			}
-
-			&[data-lang="ts"] {
-				content: "TypeScript";
-			}
 		}
-	}
 
-	// Code blocks with line numbers
-	&[data-linenos] table {
-		border-spacing: 0;
-		margin: -20px;
-
-		tr {
-			&:first-child td {
-				padding-top: 20px;
-			}
-
-			&:last-child td {
-				padding-bottom: 20px;
-			}
-
-			td {
-				&:first-child {
-					padding-left: 20px;
-					padding-right: 10px;
-					-webkit-user-select: none;
-					user-select: none;
-					vertical-align: top;
-					text-align: right;
-					background: rgba(0, 0, 0, 0.25);
-				}
-
-				&:last-child {
-					padding-left: 10px;
-					padding-right: 20px;
-				}
-			}
+		.giallo-ln {
+			display: inline-block;
+			user-select: none;
+			text-align: right;
+			margin-left: -10px;
+			padding-right: 16px;
+			min-width: 3ch;
 		}
 	}
 }
diff --git a/website/templates/book.html b/website/templates/book.html
index 12c54c7e..c843e973 100644
--- a/website/templates/book.html
+++ b/website/templates/book.html
@@ -4,7 +4,6 @@
 {%- set title = page.title -%}
 {%- set meta_article_type = true -%}
 {%- set meta_description = page.extra.summary | default(value = page.content | striptags | safe | linebreaksbr | replace(from = "<br>", to = " ") | replace(from = "  ", to = " ") | trim | truncate(length = 200)) -%}
-{%- set linked_css = ["/syntax-highlighting.css"] -%}
 {%- set css = ["/template/book.css", "/layout/reading-material.css", "/component/code-snippet.css"] -%}
 {%- set js = ["/js/book.js"] -%}
 {%- endblock head -%}