Add syntax highlighting plugin to Eleventy configuration (#78)

.eleventy.js

@@ -1,5 +1,6 @@
 const pluginRss = require("@11ty/eleventy-plugin-rss")
 const pluginNavigation = require("@11ty/eleventy-navigation")
+const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight")
 const pluginSvgSprite = require("eleventy-plugin-svg-sprite")
 const pluginPageAssets = require("eleventy-plugin-page-assets")
 const markdownIt = require("markdown-it")
@@ -20,6 +21,7 @@ const CONTENT_GLOBS = {
 
 module.exports = function (config) {
 	// Plugins
+	config.addPlugin(syntaxHighlight)
 	config.addPlugin(pluginRss)
 	config.addPlugin(pluginNavigation)
 	config.addPlugin(pluginSvgSprite, {

package.json

@@ -55,6 +55,7 @@
 	},
 	"devDependencies": {
 		"@11ty/eleventy": "^2.0.1",
+		"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
 		"@babel/core": "^7.22.5",
 		"@babel/plugin-transform-modules-commonjs": "^7.22.5",
 		"@babel/preset-env": "^7.22.5",

src/assets/styles/components/_content.scss

@@ -79,34 +79,11 @@
 			}
 		}
 
-		pre {
-			line-height: 1.75;
+		pre[class*="language-"] {
 			margin-top: 2rem;
 			margin-bottom: 1.5rem;
 			border-radius: $border-radius-8;
-			padding-top: 0.75rem;
-			padding-right: 0.75rem;
-			padding-bottom: 0.75rem;
-			padding-left: 0.75rem;
-			color: var(--background-default);
-			background-color: var(--text-primary);
-			overflow-x: auto;
-			font-weight: 400;
-			font-size: 0.875rem;
-
-			code {
-				font-weight: inherit;
-				background-color: transparent;
-				border-width: 0;
-				border-radius: 0;
-				padding: 0;
-				font-weight: inherit;
-				color: inherit;
-				font-size: inherit;
-				font-family: inherit;
-				line-height: inherit;
-			}
-		}
+    }
 
 		.footnotes-sep {
 			margin-top: 2.75rem;
@@ -133,10 +110,6 @@
 			}
 		}
 
-		code {
-			font-weight: 600;
-		}
-
 		hr {
 			margin-top: 4rem;
 			margin-bottom: 4rem;

src/assets/styles/main.scss

@@ -81,3 +81,4 @@
 //--------------------
 
 @import "vendor/raster.grid.custom";
+@import "vendor/prism-atom-dark";

src/assets/styles/vendor/prism-atom-dark.css

@@ -0,0 +1,143 @@
+/**
+ * atom-dark theme for `prism.js`
+ * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax
+ * @author Joe Gibson (@gibsjose)
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #c5c8c6;
+	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+	font-family: Inconsolata, Monaco, Consolas, "Courier New", Courier,
+		monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: 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;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #1d1f21;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: 0.1em;
+	border-radius: 0.3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #7c7c7c;
+}
+
+.token.punctuation {
+	color: #c5c8c6;
+}
+
+.namespace {
+	opacity: 0.7;
+}
+
+.token.property,
+.token.keyword,
+.token.tag {
+	color: #96cbfe;
+}
+
+.token.class-name {
+	color: #ffffb6;
+	text-decoration: underline;
+}
+
+.token.boolean,
+.token.constant {
+	color: #99cc99;
+}
+
+.token.symbol,
+.token.deleted {
+	color: #f92672;
+}
+
+.token.number {
+	color: #ff73fd;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #a8ff60;
+}
+
+.token.variable {
+	color: #c6c5fe;
+}
+
+.token.operator {
+	color: #ededed;
+}
+
+.token.entity {
+	color: #ffffb6;
+	cursor: help;
+}
+
+.token.url {
+	color: #96cbfe;
+}
+
+.language-css .token.string,
+.style .token.string {
+	color: #87c38a;
+}
+
+.token.atrule,
+.token.attr-value {
+	color: #f9ee98;
+}
+
+.token.function {
+	color: #dad085;
+}
+
+.token.regex {
+	color: #e9c062;
+}
+
+.token.important {
+	color: #fd971f;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}

src/layouts/base.njk

@@ -44,7 +44,6 @@
         <script>
             {% include "initialtheme.njk" %}
         </script>
-
         <script async src="https://analytics.umami.is/script.js" data-website-id="cc3e0e53-f632-4b18-9634-a422d703728e"></script>
     </head>
     <body>