Move from Prism to Shiki for syntax highlighing

DeclanChidlow · Jun 28, 2024 · a04cdc1 · a04cdc1
1 parent 80059ac
commit a04cdc1
Show file tree

Hide file tree

Showing 35 changed files with 137 additions and 109 deletions.
diff --git a/config/global/elements/head.html b/config/global/elements/head.html
@@ -18,5 +18,5 @@
 	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
 	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-	<script src="/scripts/prism.js"></script>
+	<script type="module" src="/scripts/syntax-highlighting.js"></script>
 	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
diff --git a/config/global/scripts/prism.js b/config/global/scripts/prism.js
diff --git a/config/global/scripts/syntax-highlighting.js b/config/global/scripts/syntax-highlighting.js
@@ -0,0 +1,39 @@
+// Based on https://brandur.org/fragments/shiki
+
+import { codeToHtml } from "https://esm.sh/shiki@1.0.0";
+
+const htmlEscapes = new Map([
+	["&amp;", "&"],
+	["&lt;", "<"],
+	["&gt;", ">"],
+]);
+
+function unescapeHTMLEntities(str) {
+	for (const [escaped, unescaped] of htmlEscapes) {
+		str = str.replaceAll(escaped, unescaped);
+	}
+	return str;
+}
+
+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();
+
+	if (!language) return;
+
+	const code = unescapeHTMLEntities(codeBlock.innerHTML);
+	codeBlock.parentElement.outerHTML = await codeToHtml(code, {
+		lang: language,
+		theme: "vitesse-dark",
+	});
+};
+
+await Promise.all(Array.from(document.querySelectorAll("pre code")).map(processCodeBlock));
diff --git a/config/global/styles/type/code.css b/config/global/styles/type/code.css
@@ -18,3 +18,7 @@ code {
 	word-break: normal;
 	word-wrap: normal;
 }
+
+pre code {
+	background: none;
+}
diff --git a/docs/404.html b/docs/404.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
 
 

diff --git a/docs/contact.html b/docs/contact.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
 
 

diff --git a/docs/index.html b/docs/index.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
 
 

diff --git a/docs/portfolio.html b/docs/portfolio.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
 
 

diff --git a/docs/portfolio/CapChord.html b/docs/portfolio/CapChord.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
 
 

diff --git a/docs/portfolio/Meat-Typeface.html b/docs/portfolio/Meat-Typeface.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
 
 

diff --git a/docs/portfolio/Mutant-Remix.html b/docs/portfolio/Mutant-Remix.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
 
 

diff --git a/docs/portfolio/Pam-Carters-Scriptural-Poetry.html b/docs/portfolio/Pam-Carters-Scriptural-Poetry.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
 
 

diff --git a/docs/portfolio/Photography.html b/docs/portfolio/Photography.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
 
 

diff --git a/docs/posts.html b/docs/posts.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
 
 

diff --git a/docs/posts/A-Year-With-The-Framework-Laptop-13.html b/docs/posts/A-Year-With-The-Framework-Laptop-13.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
 
 

diff --git a/docs/posts/Cybersecurity-Superstition.html b/docs/posts/Cybersecurity-Superstition.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
 
 

diff --git a/docs/posts/Everything-Is-Chrome.html b/docs/posts/Everything-Is-Chrome.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
 
 

diff --git a/docs/posts/Halo-My-Thoughts.html b/docs/posts/Halo-My-Thoughts.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
 
 

diff --git a/docs/posts/I-Got-A-Flipper-Zero.html b/docs/posts/I-Got-A-Flipper-Zero.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
 
 

diff --git a/docs/posts/I-Hate-My-Nokia.html b/docs/posts/I-Hate-My-Nokia.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
 
 

diff --git a/docs/posts/JPEG-XL-And-Googles-War-Against-It.html b/docs/posts/JPEG-XL-And-Googles-War-Against-It.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
 
 

diff --git a/docs/posts/LibreOffice-Setup.html b/docs/posts/LibreOffice-Setup.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
 
 

diff --git a/docs/posts/Making-Windows-Usable.html b/docs/posts/Making-Windows-Usable.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
 
 

diff --git a/docs/posts/Minecraft-Nostalgia-And-Growing-Up.html b/docs/posts/Minecraft-Nostalgia-And-Growing-Up.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
 
 

diff --git a/docs/posts/My-Code-Formatting-Guidelines.html b/docs/posts/My-Code-Formatting-Guidelines.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
 
 
@@ -101,7 +101,7 @@ <h2>Use Tabs</h2>
 <h2>Always Add Semicolons</h2>
 <p>When writing JavaScript, every line that can end with a semicolon should end with a semicolon. JavaScript engines add them anyway, and it’s ideal to see exactly what code will be executed.</p>
 <p>Prettier: <a href="https://prettier.io/docs/en/options.html#semicolons"><code>semi: true</code></a></p>
-<pre><code class="language-JavaScript">// Bad
+<pre><code class="language-javascript">// Bad
 function name {
 	console.log("I truly do love JavaScript")
 }
@@ -114,7 +114,7 @@ <h2>Always Add Semicolons</h2>
 <h2>Use Double Quotes</h2>
 <p>Strings should use double quotes (<code>""</code>), not single quotes (<code>''</code>). This makes it easier to use single quotes (which are more common) within strings. This is merely a default, and there will be situations where using single quotes is preferable. For the most part, Prettier will handle these exceptions.</p>
 <p>Prettier: <a href="https://prettier.io/docs/en/options.html#quotes"><code>singleQuote: true</code></a>, <a href="https://prettier.io/docs/en/options.html#jsx-quotes"><code>jsxSingleQuote: false</code></a></p>
-<pre><code class="language-JavaScript">// Bad
+<pre><code class="language-javascript">// Bad
 const variable = 'String Content';
 
 // Good
@@ -123,7 +123,7 @@ <h2>Use Double Quotes</h2>
 <h2>Quote Properties</h2>
 <p>Properties should all be quoted in the same way, rather than introducing unnecessary (and potentially confusing) variation within an object.</p>
 <p>Prettier: <a href="https://prettier.io/docs/en/options.html#quote-props"><code>quoteProps: "consistent"</code></a></p>
-<pre><code class="language-JavaScript">// Bad
+<pre><code class="language-javascript">// Bad
 object = {
 	property1: "content",
 	"property2": "content"
@@ -137,7 +137,7 @@ <h2>Quote Properties</h2>
 </code></pre>
 <h2>Don’t Split Strings Across Multiple Lines</h2>
 <p>Strings should be contained within one line unless there is genuine reason not to do so. It makes things hard to search and is a general pain to deal with.</p>
-<pre><code class="language-JavaScript">// Bad
+<pre><code class="language-javascript">// Bad
 const variable = "This is awful. It may be easier for a human to read, but \
 it leads to annoyance and makes it harder to search for things. It is an \
 all around pain.";
@@ -148,7 +148,7 @@ <h2>Don’t Split Strings Across Multiple Lines</h2>
 <h2>Use Trailing Commas</h2>
 <p>Trailing commas help keep version history clean. Rather than a diff showing the implementation of a new line <em>and</em> a comma on the previous line, it will only display the actual change, a new line.</p>
 <p>Prettier: <a href="https://prettier.io/docs/en/options.html#trailing-commas"><code>trailingComma: "all"</code></a></p>
-<pre><code class="language-JavaScript">// Bad
+<pre><code class="language-javascript">// Bad
 object = {
 	property1: "content",
 	"property2": "content"
@@ -163,7 +163,7 @@ <h2>Use Trailing Commas</h2>
 <h2>Space Brackets</h2>
 <p>Brackets should have spaces on either side to provide padding. This makes it easier to read and maintains consistency.</p>
 <p>Prettier: <a href="https://prettier.io/docs/en/options.html#bracket-spacing"><code>bracketSpacing: true</code></a></p>
-<pre><code class="language-JavaScript">// Bad
+<pre><code class="language-javascript">// Bad
 {foo: bar}
 
 // Good
@@ -172,7 +172,7 @@ <h2>Space Brackets</h2>
 <h2>Use Arrow Parentheses</h2>
 <p>Using arrow parentheses makes it easier to read and make changes.</p>
 <p>Prettier: <a href="https://prettier.io/docs/en/options.html#arrow-function-parentheses"><code>arrowParens: always</code></a></p>
-<pre><code class="language-JavaScript">// Bad
+<pre><code class="language-javascript">// Bad
 x =&gt; x
 
 // Good
@@ -193,7 +193,7 @@ <h2>Format Embedded Languages</h2>
 <h2>Keep Multiple Attributes Per Line</h2>
 <p>Splitting an element’s attributes into multiple lines often makes it harder to quickly grasp structure and is an inefficient use of screen space.</p>
 <p>Prettier: <a href="https://prettier.io/docs/en/options.html#single-attribute-per-line"><code>singleAttributePerLine: false</code></a></p>
-<pre><code class="language-HTML">// Bad
+<pre><code class="language-html">// Bad
 &lt;div
 	 class="name"
 	 id="name"

diff --git a/docs/posts/Prematurely-Pulling-The-Plug-On-3G.html b/docs/posts/Prematurely-Pulling-The-Plug-On-3G.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
 
 

diff --git a/docs/posts/School-Internet.html b/docs/posts/School-Internet.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>
 
 

diff --git a/docs/posts/Welcome.html b/docs/posts/Welcome.html
@@ -20,7 +20,7 @@
     	<meta http-equiv="X-Content-Type-Options" content="nosniff" />
     	<meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
 
-    	<script src="/scripts/prism.js"></script>
+    	<script type="module" src="/scripts/syntax-highlighting.js"></script>
     	<script data-goatcounter="https://stats.vale.rocks/count" async src="//gc.zgo.at/count.js"></script>