Add syntax highlighter (needs styles)

eleventy.config.cjs

@@ -1,11 +1,12 @@
 'use strict';
 
+const { EleventyRenderPlugin } = require('@11ty/eleventy');
+const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
 const formatDistanceToNow = require('date-fns/formatDistanceToNow');
 const yaml = require('js-yaml');
 const markdown = require('markdown-it');
 const markdownDefList = require('markdown-it-deflist');
 const typogrify = require('typogr');
-const { EleventyRenderPlugin } = require('@11ty/eleventy');
 
 /** @param {import('@11ty/eleventy').UserConfig} eleventyConfig */
 module.exports = (eleventyConfig) => {
@@ -57,6 +58,7 @@ module.exports = (eleventyConfig) => {
   );
 
   eleventyConfig.addPlugin(EleventyRenderPlugin);
+  eleventyConfig.addPlugin(syntaxHighlight);
 
   // settings
   return {

package.json

@@ -20,8 +20,8 @@
     "serve": "run-p 'watch:**'",
     "build": "run-s build-dev:scripts 'build:**'",
     "build-prod": "run-s build-prod:scripts 'build:**'",
-    "build:sass": "sass --style=compressed ./source/assets/sass/sass.scss:./source/assets/dist/css/sass.css ./source/assets/sass/noscript.scss:./source/assets/dist/css/noscript.css",
+    "build:sass": "sass --style=compressed --load-path=node_modules ./source/assets/sass/sass.scss:./source/assets/dist/css/sass.css ./source/assets/sass/noscript.scss:./source/assets/dist/css/noscript.css",
-    "watch:sass": "sass --watch ./source/assets/sass/sass.scss:./source/assets/dist/css/sass.css ./source/assets/sass/noscript.scss:./source/assets/dist/css/noscript.css",
+    "watch:sass": "sass --watch --load-path=node_modules ./source/assets/sass/sass.scss:./source/assets/dist/css/sass.css ./source/assets/sass/noscript.scss:./source/assets/dist/css/noscript.css",
     "build-dev:scripts": "rollup -c",
     "build-prod:scripts": "BABEL_ENV=production rollup -c",
     "watch:scripts": "npm run build-dev:scripts -- -w",
@@ -40,6 +40,7 @@
   },
   "devDependencies": {
     "@11ty/eleventy": "^2.0.0-0",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",

source/assets/sass/components/_link-header.scss

@@ -76,7 +76,5 @@ h6 {
 
   to {
     background-color: #f8f8f8;
-
-    // background-color: <%= Rouge::Themes::Github.get_style(Rouge::Token::Tokens::Text)[:bg] %>;
   }
 }

source/assets/sass/sass.scss

@@ -36,3 +36,6 @@
 @use 'components/sass-syntax-switcher';
 @use 'components/tables';
 @use 'regions/banner';
+
+// @@@ Do we want this theme?
+@use 'prismjs/themes/prism.css';

source/assets/sass/vendor/_syntax-accessible.scss

@@ -1,3 +1,5 @@
+// @@@ These definitions no longer match the added classes...
+
 @use '../functions';
 
 // Stylesheet pulled from Rogue stylesheet with colours updated for a11y
@@ -270,4 +272,4 @@
 
 .highlight {
   background-color: #f8f8f8;
-}
+}

source/assets/sass/vendor/_syntax.scss.erb

@@ -1 +1,3 @@
+# @@@ I don't think this file is used?
+
 <%= Rouge::Themes::Github.render(:scope => '.highlight') %>

source/assets/sass/vendor/typedoc/_highlight.css

@@ -1,3 +1,5 @@
+/* @@@ I don't think this file is used? */
+
 :root {
     --light-hl-0: #0000FF;
     --dark-hl-0: #569CD6;

source/assets/sass/vendor/typedoc/_highlight.scss

@@ -1,3 +1,5 @@
+// @@@ These should extend the updated syntax styles...
+
 @use '../syntax-accessible';
 
 // Colors updated to match the standard Sass styling.

source/install.md

@@ -53,7 +53,7 @@ When you install Sass on the command line, you'll be able to run the
 `sass` executable to compile `.sass` and `.scss` files to `.css` files.
 For example:
 
-```shell
+```sh
 sass source/stylesheets/index.scss build/stylesheets/index.css
 ```
 
@@ -80,7 +80,7 @@ Install Anywhere (npm)
 : If you use Node.js, you can also install Sass using
 [npm](https://www.npmjs.com/) by running
 
-    ```shell
+    ```sh
     npm install -g sass
     ```
 
@@ -94,7 +94,7 @@ Install on Windows (Chocolatey)
 : If you use the [Chocolatey package manager](https://chocolatey.org/) for
 Windows, you can install Dart Sass by running
 
-    ```shell
+    ```sh
     choco install sass
     ```
 
@@ -103,7 +103,7 @@ Install on Mac OS X or Linux (Homebrew)
 : If you use [the Homebrew package manager](https://brew.sh/) for Mac OS X or
 Linux, you can install Dart Sass by running
 
-    ```shell
+    ```sh
     brew install sass/sass/sass
     ```
 

yarn.lock

@@ -33,6 +33,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@11ty/eleventy-plugin-syntaxhighlight@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "@11ty/eleventy-plugin-syntaxhighlight@npm:4.2.0"
+  dependencies:
+    linkedom: ^0.14.19
+    prismjs: ^1.29.0
+  checksum: 6109f5f68bed0286b1cec572808b1239c1442baf04d3db78de21e3bbdef920ef7985dd3643f28282a12db894bebed5207bf171823b7bb98f4b71fb66169e4fac
+  languageName: node
+  linkType: hard
+
 "@11ty/eleventy-utils@npm:^1.0.1":
   version: 1.0.1
   resolution: "@11ty/eleventy-utils@npm:1.0.1"
@@ -2309,6 +2319,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"boolbase@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "boolbase@npm:1.0.0"
+  checksum: 3e25c80ef626c3a3487c73dbfc70ac322ec830666c9ad915d11b701142fab25ec1e63eff2c450c74347acfd2de854ccde865cd79ef4db1683f7c7b046ea43bb0
+  languageName: node
+  linkType: hard
+
 "brace-expansion@npm:^1.1.7":
   version: 1.1.11
   resolution: "brace-expansion@npm:1.1.11"
@@ -2658,6 +2675,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-select@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "css-select@npm:5.1.0"
+  dependencies:
+    boolbase: ^1.0.0
+    css-what: ^6.1.0
+    domhandler: ^5.0.2
+    domutils: ^3.0.1
+    nth-check: ^2.0.1
+  checksum: 2772c049b188d3b8a8159907192e926e11824aea525b8282981f72ba3f349cf9ecd523fdf7734875ee2cb772246c22117fc062da105b6d59afe8dcd5c99c9bda
+  languageName: node
+  linkType: hard
+
+"css-what@npm:^6.1.0":
+  version: 6.1.0
+  resolution: "css-what@npm:6.1.0"
+  checksum: b975e547e1e90b79625918f84e67db5d33d896e6de846c9b584094e529f0c63e2ab85ee33b9daffd05bff3a146a1916bec664e18bb76dd5f66cbff9fc13b2bbe
+  languageName: node
+  linkType: hard
+
 "cssesc@npm:^3.0.0":
   version: 3.0.0
   resolution: "cssesc@npm:3.0.0"
@@ -2667,6 +2704,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cssom@npm:^0.5.0":
+  version: 0.5.0
+  resolution: "cssom@npm:0.5.0"
+  checksum: 823471aa30091c59e0a305927c30e7768939b6af70405808f8d2ce1ca778cddcb24722717392438329d1691f9a87cb0183b64b8d779b56a961546d54854fde01
+  languageName: node
+  linkType: hard
+
 "date-fns@npm:^2.29.3":
   version: 2.29.3
   resolution: "date-fns@npm:2.29.3"
@@ -2827,7 +2871,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0":
+"dom-serializer@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "dom-serializer@npm:2.0.0"
+  dependencies:
+    domelementtype: ^2.3.0
+    domhandler: ^5.0.2
+    entities: ^4.2.0
+  checksum: cd1810544fd8cdfbd51fa2c0c1128ec3a13ba92f14e61b7650b5de421b88205fd2e3f0cc6ace82f13334114addb90ed1c2f23074a51770a8e9c1273acbc7f3e6
+  languageName: node
+  linkType: hard
+
+"domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0, domelementtype@npm:^2.3.0":
   version: 2.3.0
   resolution: "domelementtype@npm:2.3.0"
   checksum: ee837a318ff702622f383409d1f5b25dd1024b692ef64d3096ff702e26339f8e345820f29a68bcdcea8cfee3531776b3382651232fbeae95612d6f0a75efb4f6
@@ -2843,6 +2898,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"domhandler@npm:^5.0.1, domhandler@npm:^5.0.2":
+  version: 5.0.3
+  resolution: "domhandler@npm:5.0.3"
+  dependencies:
+    domelementtype: ^2.3.0
+  checksum: 0f58f4a6af63e6f3a4320aa446d28b5790a009018707bce2859dcb1d21144c7876482b5188395a188dfa974238c019e0a1e610d2fc269a12b2c192ea2b0b131c
+  languageName: node
+  linkType: hard
+
 "domutils@npm:^2.8.0":
   version: 2.8.0
   resolution: "domutils@npm:2.8.0"
@@ -2854,6 +2918,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"domutils@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "domutils@npm:3.0.1"
+  dependencies:
+    dom-serializer: ^2.0.0
+    domelementtype: ^2.3.0
+    domhandler: ^5.0.1
+  checksum: 23aa7a840572d395220e173cb6263b0d028596e3950100520870a125af33ff819e6f609e1606d6f7d73bd9e7feb03bb404286e57a39063b5384c62b724d987b3
+  languageName: node
+  linkType: hard
+
 "ee-first@npm:1.1.1":
   version: 1.1.1
   resolution: "ee-first@npm:1.1.1"
@@ -2926,6 +3001,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"entities@npm:^4.2.0, entities@npm:^4.3.0":
+  version: 4.4.0
+  resolution: "entities@npm:4.4.0"
+  checksum: 84d250329f4b56b40fa93ed067b194db21e8815e4eb9b59f43a086f0ecd342814f6bc483de8a77da5d64e0f626033192b1b4f1792232a7ea6b970ebe0f3187c2
+  languageName: node
+  linkType: hard
+
 "env-paths@npm:^2.2.0":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
@@ -3863,6 +3945,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"html-escaper@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "html-escaper@npm:3.0.3"
+  checksum: a2678be42c15d2ef6e629775dac0925a729f4615c6593db8358b9262c7565c4627134987c00f548eb4eb76cbc3b3392f78475cd02b022f8ae7aeb9a88280831b
+  languageName: node
+  linkType: hard
+
 "html-tags@npm:^3.2.0":
   version: 3.2.0
   resolution: "html-tags@npm:3.2.0"
@@ -3882,6 +3971,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"htmlparser2@npm:^8.0.1":
+  version: 8.0.1
+  resolution: "htmlparser2@npm:8.0.1"
+  dependencies:
+    domelementtype: ^2.3.0
+    domhandler: ^5.0.2
+    domutils: ^3.0.1
+    entities: ^4.3.0
+  checksum: 06d5c71e8313597722bc429ae2a7a8333d77bd3ab07ccb916628384b37332027b047f8619448d8f4a3312b6609c6ea3302a4e77435d859e9e686999e6699ca39
+  languageName: node
+  linkType: hard
+
 "http-cache-semantics@npm:^4.1.0":
   version: 4.1.1
   resolution: "http-cache-semantics@npm:4.1.1"
@@ -4561,6 +4662,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"linkedom@npm:^0.14.19":
+  version: 0.14.21
+  resolution: "linkedom@npm:0.14.21"
+  dependencies:
+    css-select: ^5.1.0
+    cssom: ^0.5.0
+    html-escaper: ^3.0.3
+    htmlparser2: ^8.0.1
+    uhyphen: ^0.1.0
+  checksum: c82f5532ab76d407a153d4da4168fde8c2aee12901ff26c3f677dbd69639c59901f40bf60529dba677881dff40885b247952e6c56a37c5cd4546768432b00d4c
+  languageName: node
+  linkType: hard
+
 "linkify-it@npm:^4.0.1":
   version: 4.0.1
   resolution: "linkify-it@npm:4.0.1"
@@ -5228,6 +5342,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nth-check@npm:^2.0.1":
+  version: 2.1.1
+  resolution: "nth-check@npm:2.1.1"
+  dependencies:
+    boolbase: ^1.0.0
+  checksum: 5afc3dafcd1573b08877ca8e6148c52abd565f1d06b1eb08caf982e3fa289a82f2cae697ffb55b5021e146d60443f1590a5d6b944844e944714a5b549675bcd3
+  languageName: node
+  linkType: hard
+
 "nunjucks@npm:^3.2.3":
   version: 3.2.3
   resolution: "nunjucks@npm:3.2.3"
@@ -5650,6 +5773,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prismjs@npm:^1.29.0":
+  version: 1.29.0
+  resolution: "prismjs@npm:1.29.0"
+  checksum: 007a8869d4456ff8049dc59404e32d5666a07d99c3b0e30a18bd3b7676dfa07d1daae9d0f407f20983865fd8da56de91d09cb08e6aa61f5bc420a27c0beeaf93
+  languageName: node
+  linkType: hard
+
 "promise-each@npm:^2.2.0":
   version: 2.2.0
   resolution: "promise-each@npm:2.2.0"
@@ -6148,6 +6278,7 @@ __metadata:
   resolution: "sass-site@workspace:."
   dependencies:
     "@11ty/eleventy": ^2.0.0-0
+    "@11ty/eleventy-plugin-syntaxhighlight": ^4.2.0
     "@babel/core": ^7.20.12
     "@babel/preset-env": ^7.20.2
     "@babel/preset-typescript": ^7.18.6
@@ -7010,6 +7141,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"uhyphen@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "uhyphen@npm:0.1.0"
+  checksum: 1df304800387900f76365ff8090ee3667534a944184b9330cd96dbf4b1ad3fb0d376969f92f8b03decfc2e701f0d2eabeda7d002c909f2d125062e5e064d23ef
+  languageName: node
+  linkType: hard
+
 "unbox-primitive@npm:^1.0.2":
   version: 1.0.2
   resolution: "unbox-primitive@npm:1.0.2"