Install syntax highlighting plugin and stylesheet

eleventy.config.js

@@ -1,6 +1,7 @@
 // Installed Plugins
 import pluginRss from "@11ty/eleventy-plugin-rss";
 import pluginEleventyNavigation from "@11ty/eleventy-navigation";
+import pluginSyntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
 import pluginEmbedEverything from "eleventy-plugin-embed-everything";
 import pluginMetagen from "eleventy-plugin-metagen";
 import pluginEmojiReadTime from "@11tyrocks/eleventy-plugin-emoji-readtime";
@@ -17,6 +18,7 @@ export default function(eleventyConfig) {
     // Installed Plugins
     eleventyConfig.addPlugin(pluginRss);
     eleventyConfig.addPlugin(pluginEleventyNavigation);
+    eleventyConfig.addPlugin(pluginSyntaxHighlight, { preAttributes: { tabindex: 0 } });
     eleventyConfig.addPlugin(pluginEmbedEverything, { add: ['soundcloud'] });
     eleventyConfig.addPlugin(pluginMetagen);
     eleventyConfig.addPlugin(pluginEmojiReadTime);

package.json

@@ -12,6 +12,7 @@
     "@11ty/eleventy": "^3.0.0-beta.1",
     "@11ty/eleventy-navigation": "^0.3.5",
     "@11ty/eleventy-plugin-rss": "^2.0.2",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "@11tyrocks/eleventy-plugin-emoji-readtime": "^1.0.1",
     "@uncenter/eleventy-plugin-toc": "^1.0.3",
     "@zachleat/details-utils": "^2.0.2",

src/_includes/global/css-bundle.njk

@@ -4,6 +4,7 @@
     "content",
     "plugins",
     "components",
+    "a11y-syntax-highlighting-dark",
     "pridesymbols",
     "utility"
 ] %}

src/assets/css/a11y-syntax-highlighting-dark.css

@@ -0,0 +1,188 @@
+/**
+ * a11y-dark theme for JavaScript, CSS, and HTML
+ * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
+ * @author ericwbailey
+ */
+
+/*
+ Theme
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #f8f8f2;
+  background: none;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #2b2b2b;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #d4d0ab;
+}
+
+.token.punctuation {
+  color: #fefefe;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #ffa07a;
+}
+
+.token.boolean,
+.token.number {
+  color: #00e0e0;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #abe338;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+  color: #00e0e0;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function {
+  color: #ffd700;
+}
+
+.token.keyword {
+  color: #00e0e0;
+}
+
+.token.regex,
+.token.important {
+  color: #ffd700;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+
+/*
+ Plugin support
+ */
+
+/* Line highlight */
+.line-highlight {
+  background: rgba(255, 217, 0, 0.10);
+  border-top: 1px solid rgba(255, 217, 0, 0.55);
+  border-bottom: 1px solid rgba(255, 217, 0, 0.55);
+}
+
+/* Line numbers */
+.line-numbers .line-numbers-rows {
+  border-right: 1px solid #F8F8F2;
+}
+
+.line-numbers-rows > span:before {
+  color: #D4D0AB;
+}
+
+
+/*
+ High contrast mode support
+*/
+@media screen and (-ms-high-contrast: active) {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    color: windowText;
+    background: window;
+  }
+
+  :not(pre) > code[class*="language-"],
+  pre[class*="language-"] {
+    background: window;
+  }
+
+  .token.important {
+    background: highlight;
+    color: window;
+    font-weight: normal;
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.function,
+  .token.keyword,
+  .token.operator,
+  .token.selector {
+    font-weight: bold;
+  }
+
+  .token.attr-value,
+  .token.comment,
+  .token.doctype,
+  .token.function,
+  .token.keyword,
+  .token.operator,
+  .token.property,
+  .token.string {
+    color: highlight;
+  }
+
+  .token.attr-value,
+  .token.url {
+    font-weight: normal;
+  }
+}

src/statements/colophon.md

@@ -1,7 +1,7 @@
 ---
 title: Colophon
 keyword: colophon page
-updated: 2024-07-27
+updated: 2024-08-02
 toc: true
 eleventyNavigation:
     order: 14
@@ -25,6 +25,7 @@ Previously, this website was hosted on [Neocities](https://neocities.org/) until
 ## Plugins
 * Eleventy's official [RSS](https://www.11ty.dev/docs/plugins/rss/) plugin
 * Eleventy's official [Navigation](https://www.11ty.dev/docs/plugins/navigation/) plugin
+* Eleventy's official [Syntax Highlighting](https://www.11ty.dev/docs/plugins/syntaxhighlight/) plugin
 * [@zachleat/details-utils](https://www.npmjs.com/package/@zachleat/details-utils)
 
 ### Eleventy Community Plugins
@@ -45,6 +46,7 @@ Eleventy has the Markdown parser [markdown-it](https://www.npmjs.com/package/mar
 ## Self-hosted Assets
 * [Lexend](https://www.lexend.com/) font family — used as the default font of this site
 * [Intel One Mono](https://www.intel.com/content/www/us/en/company-overview/one-monospace-font.html) typeface — used as the monospaced font of this site
+* Eric Bailey's [a11y-syntax-highlighting](https://github.com/ericwbailey/a11y-syntax-highlighting) CSS dark mode stylesheet for Prism.js
 
 ## JavaScript
 Due to this website being a static site, JavaScript is used to create dynamic and interactive components of this site. Here is a list of how JavaScript is used on this site: