From 11f3f7976db31a03b4c73a34ca6a548ef5c9b9ad Mon Sep 17 00:00:00 2001 From: Jonny Gerig Meyer Date: Tue, 31 Jan 2023 14:18:33 -0500 Subject: [PATCH] Add syntax highlighter (needs styles) --- eleventy.config.cjs | 4 +- package.json | 5 +- .../assets/sass/components/_link-header.scss | 2 - source/assets/sass/sass.scss | 3 + .../sass/vendor/_syntax-accessible.scss | 4 +- source/assets/sass/vendor/_syntax.scss.erb | 2 + .../assets/sass/vendor/typedoc/_highlight.css | 2 + .../sass/vendor/typedoc/_highlight.scss | 2 + source/install.md | 8 +- yarn.lock | 140 +++++++++++++++++- 10 files changed, 161 insertions(+), 11 deletions(-) diff --git a/eleventy.config.cjs b/eleventy.config.cjs index 9a1da59..2f49e54 100644 --- a/eleventy.config.cjs +++ b/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 { diff --git a/package.json b/package.json index 4f4083f..a9e3424 100644 --- a/package.json +++ b/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", - "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", + "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 --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", diff --git a/source/assets/sass/components/_link-header.scss b/source/assets/sass/components/_link-header.scss index ff1ea2c..8291807 100644 --- a/source/assets/sass/components/_link-header.scss +++ b/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] %>; } } diff --git a/source/assets/sass/sass.scss b/source/assets/sass/sass.scss index 2acb6ef..d233d03 100755 --- a/source/assets/sass/sass.scss +++ b/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'; diff --git a/source/assets/sass/vendor/_syntax-accessible.scss b/source/assets/sass/vendor/_syntax-accessible.scss index 7626014..7a06bb0 100644 --- a/source/assets/sass/vendor/_syntax-accessible.scss +++ b/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; -} \ No newline at end of file +} diff --git a/source/assets/sass/vendor/_syntax.scss.erb b/source/assets/sass/vendor/_syntax.scss.erb index 188511c..8095ae9 100644 --- a/source/assets/sass/vendor/_syntax.scss.erb +++ b/source/assets/sass/vendor/_syntax.scss.erb @@ -1 +1,3 @@ +# @@@ I don't think this file is used? + <%= Rouge::Themes::Github.render(:scope => '.highlight') %> diff --git a/source/assets/sass/vendor/typedoc/_highlight.css b/source/assets/sass/vendor/typedoc/_highlight.css index 638da89..be93a9e 100644 --- a/source/assets/sass/vendor/typedoc/_highlight.css +++ b/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; diff --git a/source/assets/sass/vendor/typedoc/_highlight.scss b/source/assets/sass/vendor/typedoc/_highlight.scss index eb7b494..5951e97 100644 --- a/source/assets/sass/vendor/typedoc/_highlight.scss +++ b/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. diff --git a/source/install.md b/source/install.md index 7484a3b..6af9eb9 100644 --- a/source/install.md +++ b/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 ``` diff --git a/yarn.lock b/yarn.lock index 87369f3..e9a78f1 100644 --- a/yarn.lock +++ b/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"