Begin updating codeblocks (update js and fix line numbers)

docs/scripts/syntax-highlighting.js

@@ -1,39 +1,46 @@
 // Based on https://brandur.org/fragments/shiki
-
-import { codeToHtml } from "https://esm.sh/shiki@1.10.0";
+import { codeToHtml } from "https://esm.sh/shiki@1.22.0";
 
 const htmlEscapes = new Map([
 	["&", "&"],
 	["&lt;", "<"],
 	["&gt;", ">"],
+	["&quot;", '"'],
+	["&#39;", "'"],
 ]);
 
 function unescapeHTMLEntities(str) {
-	for (const [escaped, unescaped] of htmlEscapes) {
-		str = str.replaceAll(escaped, unescaped);
-	}
-	return str;
+	return str.replace(/&(?:amp|lt|gt|quot|#39);/g, (match) => htmlEscapes.get(match));
 }
 
-const processCodeBlock = async (codeBlock) => {
-	const classNames = codeBlock.getAttribute("class");
-	if (!classNames) return;
-
-	const language = classNames
-		.split(" ")
-		.map((c) => c.split("-"))
-		.find(([prefix]) => prefix === "language")
-		?.slice(1)
-		.join("-")
-		.toLowerCase();
+const getLanguageFromClassNames = (classNames) => {
+	if (!classNames) return null;
+	const languageClass = classNames.split(" ").find((c) => c.startsWith("language-"));
+	return languageClass ? languageClass.slice(9).toLowerCase() : null;
+};
 
+const processCodeBlock = async (codeBlock) => {
+	const language = getLanguageFromClassNames(codeBlock.className);
 	if (!language) return;
 
-	const code = unescapeHTMLEntities(codeBlock.innerHTML);
-	codeBlock.parentElement.outerHTML = await codeToHtml(code, {
+	const code = unescapeHTMLEntities(codeBlock.textContent.trim());
+	const highlightedCode = await codeToHtml(code, {
 		lang: language,
 		theme: "vitesse-dark",
 	});
+
+	const tempElement = document.createElement("div");
+	tempElement.innerHTML = highlightedCode;
+	codeBlock.parentElement.replaceWith(tempElement.firstElementChild);
+};
+
+const highlightAllCodeBlocks = async () => {
+	const codeBlocks = document.querySelectorAll("pre code");
+	await Promise.all(Array.from(codeBlocks).map(processCodeBlock));
 };
 
-await Promise.all(Array.from(document.querySelectorAll("pre code")).map(processCodeBlock));
+if (document.readyState === "loading") {
+	document.addEventListener("DOMContentLoaded", highlightAllCodeBlocks);
+} else {
+	await highlightAllCodeBlocks();
+}

docs/styles/type/code.css

@@ -9,6 +9,7 @@ pre {
 
 	code {
 		background: none;
+		padding: 0;
 	}
 }
 
@@ -25,17 +26,12 @@ code {
 	counter-reset: step;
 	counter-increment: step 0;
 
-	.line {
-		&::before {
-			content: counter(step);
-			counter-increment: step;
-			width: 1rem;
-			margin-right: 1.5rem;
-			display: inline-block;
-			text-align: right;
-		}
-		&:last-child::before {
-			content: none;
-		}
+	.line::before {
+		content: counter(step);
+		counter-increment: step;
+		width: 1rem;
+		margin-right: 1.5rem;
+		display: inline-block;
+		text-align: right;
 	}
 }

input/global/scripts/syntax-highlighting.js

@@ -1,39 +1,46 @@
 // Based on https://brandur.org/fragments/shiki
-
-import { codeToHtml } from "https://esm.sh/shiki@1.10.0";
+import { codeToHtml } from "https://esm.sh/shiki@1.22.0";
 
 const htmlEscapes = new Map([
 	["&", "&"],
 	["&lt;", "<"],
 	["&gt;", ">"],
+	["&quot;", '"'],
+	["&#39;", "'"],
 ]);
 
 function unescapeHTMLEntities(str) {
-	for (const [escaped, unescaped] of htmlEscapes) {
-		str = str.replaceAll(escaped, unescaped);
-	}
-	return str;
+	return str.replace(/&(?:amp|lt|gt|quot|#39);/g, (match) => htmlEscapes.get(match));
 }
 
-const processCodeBlock = async (codeBlock) => {
-	const classNames = codeBlock.getAttribute("class");
-	if (!classNames) return;
-
-	const language = classNames
-		.split(" ")
-		.map((c) => c.split("-"))
-		.find(([prefix]) => prefix === "language")
-		?.slice(1)
-		.join("-")
-		.toLowerCase();
+const getLanguageFromClassNames = (classNames) => {
+	if (!classNames) return null;
+	const languageClass = classNames.split(" ").find((c) => c.startsWith("language-"));
+	return languageClass ? languageClass.slice(9).toLowerCase() : null;
+};
 
+const processCodeBlock = async (codeBlock) => {
+	const language = getLanguageFromClassNames(codeBlock.className);
 	if (!language) return;
 
-	const code = unescapeHTMLEntities(codeBlock.innerHTML);
-	codeBlock.parentElement.outerHTML = await codeToHtml(code, {
+	const code = unescapeHTMLEntities(codeBlock.textContent.trim());
+	const highlightedCode = await codeToHtml(code, {
 		lang: language,
 		theme: "vitesse-dark",
 	});
+
+	const tempElement = document.createElement("div");
+	tempElement.innerHTML = highlightedCode;
+	codeBlock.parentElement.replaceWith(tempElement.firstElementChild);
+};
+
+const highlightAllCodeBlocks = async () => {
+	const codeBlocks = document.querySelectorAll("pre code");
+	await Promise.all(Array.from(codeBlocks).map(processCodeBlock));
 };
 
-await Promise.all(Array.from(document.querySelectorAll("pre code")).map(processCodeBlock));
+if (document.readyState === "loading") {
+	document.addEventListener("DOMContentLoaded", highlightAllCodeBlocks);
+} else {
+	await highlightAllCodeBlocks();
+}

input/global/styles/type/code.css

@@ -9,6 +9,7 @@ pre {
 
 	code {
 		background: none;
+		padding: 0;
 	}
 }
 
@@ -25,17 +26,12 @@ code {
 	counter-reset: step;
 	counter-increment: step 0;
 
-	.line {
-		&::before {
-			content: counter(step);
-			counter-increment: step;
-			width: 1rem;
-			margin-right: 1.5rem;
-			display: inline-block;
-			text-align: right;
-		}
-		&:last-child::before {
-			content: none;
-		}
+	.line::before {
+		content: counter(step);
+		counter-increment: step;
+		width: 1rem;
+		margin-right: 1.5rem;
+		display: inline-block;
+		text-align: right;
 	}
 }