Configure syntax highlighting

.eleventy.js

@@ -1,5 +1,6 @@
 const pluginRss = require('@11ty/eleventy-plugin-rss')
 const pluginToc = require('eleventy-plugin-nesting-toc')
+const pluginSyntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight')
 
 // extra features for markdown
 const markdownIt = require('markdown-it')
@@ -13,13 +14,15 @@ const header = require('./src/_includes/filters/header')
 module.exports = function (config) {
   config.addPlugin(pluginRss)
   config.addPlugin(pluginToc)
+  config.addPlugin(pluginSyntaxHighlight)
 
-	config.setBrowserSyncConfig({
+  config.setBrowserSyncConfig({
-		files: './_site/assets/*.css'
+    files: './_site/assets/*.css'
-	})
+  })
 
   config.addPassthroughCopy('src/assets/key.txt')
   config.addPassthroughCopy('src/assets/ibm-plex/IBM-Plex-Mono/fonts/**/*')
+  config.addPassthroughCopy('src/assets/prism-base16-ateliersulphurpool.light.css')
   config.addPassthroughCopy('src/posts/**/*.{jpeg,jpg,png,webp}')
 
   // configure markdown

package.json

@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@11ty/eleventy-plugin-rss": "^1.1.2",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0",
     "@remy/webmention": "^1.4.5",
     "@types/markdown-it": "^12.2.3",
     "autoprefixer": "^10.4.12",

pnpm-lock.yaml

@@ -3,6 +3,7 @@ lockfileVersion: 5.4
 specifiers:
   '@11ty/eleventy': ^2.0.0-canary.16
   '@11ty/eleventy-plugin-rss': ^1.1.2
+  '@11ty/eleventy-plugin-syntaxhighlight': ^4.1.0
   '@remy/webmention': ^1.4.5
   '@thi.ng/hiccup': 3.6.22
   '@types/markdown-it': ^12.2.3
@@ -20,6 +21,7 @@ specifiers:
 
 dependencies:
   '@11ty/eleventy-plugin-rss': 1.1.2
+  '@11ty/eleventy-plugin-syntaxhighlight': 4.1.0
   '@remy/webmention': 1.4.5
   '@types/markdown-it': 12.2.3
   autoprefixer: 10.4.12_postcss@8.4.17
@@ -76,6 +78,13 @@ packages:
       - supports-color
     dev: false
 
+  /@11ty/eleventy-plugin-syntaxhighlight/4.1.0:
+    resolution: {integrity: sha512-bLpV8DKFZRgh0kToh8JPCjABfalL5ydyP6rxj/aUgrlR2v9TheLGRNqoKMhfgwUETOas2nMo/rd7sCE4kSvBNQ==}
+    dependencies:
+      linkedom: 0.13.7
+      prismjs: 1.29.0
+    dev: false
+
   /@11ty/eleventy-utils/1.0.1:
     resolution: {integrity: sha512-HPpCTz4PzudcQU+i+x6GSNHVqgnvRhnVYg5dLKaAoRWLN966odAGsBxKSyhF8i1MdlOPtsytYb2AGWP7jISC5w==}
     engines: {node: '>=12'}
@@ -580,6 +589,16 @@ packages:
       nth-check: 1.0.2
     dev: false
 
+  /css-select/4.3.0:
+    resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.1.0
+      domhandler: 4.3.1
+      domutils: 2.8.0
+      nth-check: 2.1.1
+    dev: false
+
   /css-select/5.1.0:
     resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
     dependencies:
@@ -599,6 +618,10 @@ packages:
     engines: {node: '>= 6'}
     dev: false
 
+  /cssom/0.5.0:
+    resolution: {integrity: sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==}
+    dev: false
+
   /d/0.1.1:
     resolution: {integrity: sha1-2hhMU10Y2O57oqoim5FACfrhEwk=}
     dependencies:
@@ -1095,6 +1118,10 @@ packages:
       function-bind: 1.1.1
     dev: true
 
+  /html-escaper/3.0.3:
+    resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
+    dev: false
+
   /htmlparser2/3.10.1:
     resolution: {integrity: sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==}
     dependencies:
@@ -1122,7 +1149,6 @@ packages:
       domhandler: 4.3.1
       domutils: 2.8.0
       entities: 3.0.1
-    dev: true
 
   /htmlparser2/8.0.1:
     resolution: {integrity: sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==}
@@ -1304,6 +1330,16 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
+  /linkedom/0.13.7:
+    resolution: {integrity: sha512-We9cyPHV/exsrC43KXtItjqSTxwrK9pLpOnG6TLzqXrmqwe/wqd3Gi6eAAU4YCqfTgy79R8g75hY2fS7723XUg==}
+    dependencies:
+      css-select: 4.3.0
+      cssom: 0.5.0
+      html-escaper: 3.0.3
+      htmlparser2: 7.2.0
+      uhyphen: 0.1.0
+    dev: false
+
   /linkify-it/4.0.1:
     resolution: {integrity: sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==}
     dependencies:
@@ -1830,6 +1866,11 @@ packages:
     engines: {node: '>= 0.8'}
     dev: false
 
+  /prismjs/1.29.0:
+    resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
+    engines: {node: '>=6'}
+    dev: false
+
   /promise-each/2.2.0:
     resolution: {integrity: sha1-M1MXTv8mlEgQN+BOAfd6oPttG2A=}
     dependencies:
@@ -2192,6 +2233,10 @@ packages:
     dev: true
     optional: true
 
+  /uhyphen/0.1.0:
+    resolution: {integrity: sha512-o0QVGuFg24FK765Qdd5kk0zU/U4dEsCtN/GSiwNI9i8xsSVtjIAOdTaVhLwZ1nrbWxFVMxNDDl+9fednsOMsBw==}
+    dev: false
+
   /universalify/2.0.0:
     resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
     engines: {node: '>= 10.0.0'}

src/_includes/root.njk

@@ -6,6 +6,7 @@
     <title>{% if title %}{{ title }} | {% endif %}{{ page.title }}</title>
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌌</text></svg>">
     <link rel="stylesheet" href="{{ '/assets/style.css' | url }}">
+    <link rel="stylesheet" href="{{ '/assets/prism-base16-ateliersulphurpool.light.css' | url }}">
     <link rel="pgpkey authn" href="{{ '/assets/key.txt' | url }}">
     <link rel="me" href="https://post.lurk.org/@computersandblues">
     <link rel="alternate" type="application/atom+xml" href="{{ page.baseUrl }}{{ '/feed.xml' | url }}">

src/assets/prism-base16-ateliersulphurpool.light.css

@@ -0,0 +1,176 @@
+/*
+
+Name:       Base16 Atelier Sulphurpool Light
+Author:     Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool)
+
+Prism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/prism/)
+Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
+
+*/
+code[class*="language-"],
+pre[class*="language-"] {
+	font-size: 14px;
+	line-height: 1.375;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+	/*  background: #f5f7ff; */
+	color: #5e6687;
+}
+
+pre > code[class*="language-"] {
+	font-size: 1em;
+}
+
+/*pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #dfe2f1;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #dfe2f1;
+}*/
+
+/* Code blocks */
+pre[class*="language-"] {
+	/*  padding: 1em;
+	margin: .5em 0; */
+	overflow: auto;
+}
+
+/* Inline code */
+/*
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+}*/
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #898ea4;
+}
+
+.token.punctuation {
+	color: #5e6687;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.operator,
+.token.boolean,
+.token.number {
+	color: #c76b29;
+}
+
+.token.property {
+	color: #c08b30;
+}
+
+.token.tag {
+	color: #3d8fd1;
+}
+
+.token.string {
+	color: #22a2c9;
+}
+
+.token.selector {
+	color: #6679cc;
+}
+
+.token.attr-name {
+	color: #c76b29;
+}
+
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #22a2c9;
+}
+
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.unit {
+	color: #ac9739;
+}
+
+.token.statement,
+.token.regex,
+.token.atrule {
+	color: #22a2c9;
+}
+
+.token.placeholder,
+.token.variable {
+	color: #3d8fd1;
+}
+
+.token.deleted {
+	text-decoration: line-through;
+}
+
+.token.inserted {
+	border-bottom: 1px dotted #202746;
+	text-decoration: none;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.important {
+	color: #c94922;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+pre > code.highlight {
+	outline: 0.4em solid #c94922;
+	outline-offset: .4em;
+}
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+.line-numbers.line-numbers .line-numbers-rows {
+	border-right-color: #dfe2f1;
+}
+
+.line-numbers .line-numbers-rows > span:before {
+	color: #979db4;
+}
+
+/* overrides color-values for the Line Highlight plugin
+ * http://prismjs.com/plugins/line-highlight/
+ */
+.line-highlight.line-highlight {
+	background: rgba(107, 115, 148, 0.2);
+	background: -webkit-linear-gradient(left, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
+	background: linear-gradient(to right, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
+}

src/assets/style.scss

@@ -319,7 +319,7 @@ footer {
 
   pre {
     padding: 12px;
-    margin: 12px 0 32px;
+    margin: 0 0 16px;
     background: $reduced-1;
   }