Syntax highlighting + a couple other plugins

eleventy.config.js

@@ -1,7 +1,8 @@
 import pugPlugin from "@11ty/eleventy-plugin-pug";
 import brokenLinksPlugin from "eleventy-plugin-broken-links";
 import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
-import { EleventyRenderPlugin } from '@11ty/eleventy';
+import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
+import { EleventyRenderPlugin, IdAttributePlugin } from '@11ty/eleventy';
 import * as fs from 'fs';
 import * as opml from 'opml';
 
@@ -9,6 +10,7 @@ export default function (eleventyConfig) {
     eleventyConfig.setInputDirectory("src")
     eleventyConfig.addPlugin(brokenLinksPlugin);
     eleventyConfig.addPlugin(pugPlugin);
+    eleventyConfig.addPlugin(syntaxHighlight);
     eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
         htmlOptions: {
             imgAttributes: {
@@ -16,6 +18,7 @@ export default function (eleventyConfig) {
             },
         },
     });
+    eleventyConfig.addPlugin(IdAttributePlugin);
     eleventyConfig.addPlugin(EleventyRenderPlugin);
     eleventyConfig.addPassthroughCopy("src/assets/**")
 

package.json

@@ -14,6 +14,7 @@
     "@11ty/eleventy": "^3.0.0",
     "@11ty/eleventy-img": "^6.0.1",
     "@11ty/eleventy-plugin-pug": "^1.0.0",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "eleventy-plugin-broken-links": "^2.2.1",
     "opml": "^0.5.7"
   },

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       '@11ty/eleventy-plugin-pug':
         specifier: ^1.0.0
         version: 1.0.0
+      '@11ty/eleventy-plugin-syntaxhighlight':
+        specifier: ^5.0.0
+        version: 5.0.0
       eleventy-plugin-broken-links:
         specifier: ^2.2.1
         version: 2.2.1
@@ -57,6 +60,9 @@ packages:
     resolution: {integrity: sha512-7o9SQqbHfiIctfvWpbP6tibzM1R5YnC97yrMn8r8nPGA3umGbbSMUFr9sx4lepLbfzqd21svhq9X3SJRhj4xpg==}
     engines: {node: '>=18'}
 
+  '@11ty/eleventy-plugin-syntaxhighlight@5.0.0':
+    resolution: {integrity: sha512-y9BUmP1GofmbJgxM1+ky/UpFCpD8JSOeLeKItUs0WApgnrHk9haHziW7lS86lbArX5SiCVo4zTTw9x53gvRCaA==}
+
   '@11ty/eleventy-utils@1.0.3':
     resolution: {integrity: sha512-nULO91om7vQw4Y/UBjM8i7nJ1xl+/nyK4rImZ41lFxiY2d+XUz7ChAj1CDYFjrLZeu0utAYJTZ45LlcHTkUG4g==}
     engines: {node: '>=12'}
@@ -1085,6 +1091,10 @@ packages:
     resolution: {integrity: sha512-JcEmHlyLK/o0uGAlj65vgg+7LIms0xKXe60lcDOTU7oVX/3LuEuLwrQpW3VJ7de5TaFKiW4kWkaIpJL42FEgxQ==}
     engines: {node: '>=12.0.0'}
 
+  prismjs@1.30.0:
+    resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==}
+    engines: {node: '>=6'}
+
   promise@7.3.1:
     resolution: {integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==}
 
@@ -1459,6 +1469,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@11ty/eleventy-plugin-syntaxhighlight@5.0.0':
+    dependencies:
+      prismjs: 1.30.0
+
   '@11ty/eleventy-utils@1.0.3':
     dependencies:
       normalize-path: 3.0.0
@@ -2463,6 +2477,8 @@ snapshots:
       posthtml-parser: 0.11.0
       posthtml-render: 3.0.0
 
+  prismjs@1.30.0: {}
+
   promise@7.3.1:
     dependencies:
       asap: 2.0.6

src/assets/css/prism-cb.css

@@ -0,0 +1,146 @@
+/*
+ * Based on Plugin: Syntax Highlighter CB
+ * Plugin URI: http://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prism-js
+ * Description: Highlight your code snippets with an easy to use shortcode based on Lea Verou's Prism.js.
+ * Version: 1.0.0
+ * Author: c.bavota
+ * Author URI: http://bavotasan.comhttp://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prism-js/ */
+/* http://cbavota.bitbucket.org/syntax-highlighter/  */
+
+/* =====   ===== */
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #fff;
+	text-shadow: 0 1px 1px #000;
+	font-family: Menlo, Monaco, "Courier New", monospace;
+	direction: ltr;
+	text-align: left;
+	word-spacing: normal;
+	white-space: pre;
+	word-wrap: normal;
+	line-height: 1.4;
+	background: none;
+	border: 0;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"] code {
+	float: left;
+	padding: 0 15px 0 0;
+}
+
+pre[class*="language-"],
+:not(pre) > code[class*="language-"] {
+	background: #222;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 15px;
+	margin: 1em 0;
+	overflow: auto;
+	-moz-border-radius: 8px;
+	-webkit-border-radius: 8px;
+	border-radius: 8px;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: 5px 10px;
+	line-height: 1;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #797979;
+}
+
+.token.selector,
+.token.operator,
+.token.punctuation {
+	color: #fff;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.tag,
+.token.boolean {
+	color: #ffd893;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.hex,
+.token.string {
+	color: #B0C975;
+}
+
+.token.property,
+.token.entity,
+.token.url,
+.token.attr-name,
+.token.keyword {
+	color: #c27628;
+}
+
+.token.regex {
+	color: #9B71C6;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.token.function,
+.token.constant {
+	color: #e5a638;
+}
+
+.token.variable {
+	color: #fdfba8;
+}
+
+.token.number {
+	color: #8799B0;
+}
+
+.token.important,
+.token.deliminator {
+	color: #E45734;
+}
+
+/* Line highlight plugin */
+.line-highlight.line-highlight {
+	background: rgba(255, 255, 255, .2);
+}
+
+.line-highlight.line-highlight:before,
+.line-highlight.line-highlight[data-end]:after {
+	top: .3em;
+	background-color: rgba(255, 255, 255, .3);
+	color: #fff;
+	-moz-border-radius: 8px;
+	-webkit-border-radius: 8px;
+	border-radius: 8px;
+}
+
+/* for line numbers */
+/* span instead of span:before for a two-toned border */
+.line-numbers .line-numbers-rows > span {
+	border-right: 3px #d9d336 solid;
+}

src/css-bundle.njk

@@ -2,4 +2,5 @@
 permalink: bundle.css
 ---
 {% include "./assets/css/normalize.css" %}
+{% include "./assets/css/prism-cb.css" %}
 {% include "./assets/css/obsidian.css" %}