syntax highlighting, dracula

.eleventy.js

@@ -1,12 +1,14 @@
 const emojiReadTime = require("@11tyrocks/eleventy-plugin-emoji-readtime");
 const pluginRss = require("@11ty/eleventy-plugin-rss");
 const metagen = require('eleventy-plugin-metagen');
+const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 
 module.exports = function(eleventyConfig) {
   eleventyConfig.addPassthroughCopy("./content/images");
   eleventyConfig.addPlugin(emojiReadTime);
   eleventyConfig.addPlugin(pluginRss);
   eleventyConfig.addPlugin(metagen);
+  eleventyConfig.addPlugin(syntaxHighlight);
 
   eleventyConfig.addCollection("posts", function(collection) {
     return collection.getFilteredByGlob("content/posts/**/*.md");

.obsidian/workspace.json

@@ -124,17 +124,23 @@
   },
   "active": "73b3910cd9e889d3",
   "lastOpenFiles": [
+    "styles/prism-dracula.css",
+    "node_modules/@11ty/eleventy-plugin-syntaxhighlight/syntax-highlight.webc",
+    "node_modules/@11ty/eleventy-plugin-syntaxhighlight/README.md",
+    "node_modules/@11ty/eleventy-plugin-syntaxhighlight/package.json",
+    "node_modules/@11ty/eleventy-plugin-syntaxhighlight/src/markdownSyntaxHighlightOptions.js",
+    "node_modules/@11ty/eleventy-plugin-syntaxhighlight/src/hasTemplateFormat.js",
+    "node_modules/@11ty/eleventy-plugin-syntaxhighlight/src/getAttributes.js",
+    "node_modules/@11ty/eleventy-plugin-syntaxhighlight/src/PrismNormalizeAlias.js",
+    "node_modules/@11ty/eleventy-plugin-syntaxhighlight/src/PrismLoader.js",
+    "node_modules/@11ty/eleventy-plugin-syntaxhighlight/src/LiquidHighlightTag.js",
+    "node_modules/@11ty/eleventy-plugin-syntaxhighlight/src/HighlightPairedShortcode.js",
+    "node_modules/@11ty/eleventy-plugin-syntaxhighlight/src/HighlightLinesGroup.js",
+    "node_modules/@11ty/eleventy-plugin-syntaxhighlight/test/issue-80/index.md",
+    "node_modules/@11ty/eleventy-plugin-syntaxhighlight/demo/test-markdown.md",
+    "node_modules/prismjs/README.md",
+    "node_modules/prismjs/CHANGELOG.md",
     "node_modules/@11ty/eleventy-upgrade-help/README.md",
-    "node_modules/@11ty/eleventy-upgrade-help/package.json",
-    "node_modules/@11ty/eleventy-upgrade-help/src/liquidjs.js",
-    "node_modules/@11ty/eleventy-upgrade-help/src/watch-ignores.js",
-    "node_modules/@11ty/eleventy-upgrade-help/src/renderdata.js",
-    "node_modules/@11ty/eleventy-upgrade-help/src/passthrough-all.js",
-    "node_modules/@11ty/eleventy-upgrade-help/src/render-template-no-arg.js",
-    "node_modules/@11ty/eleventy-upgrade-help/src/node-version.js",
-    "node_modules/@11ty/eleventy-upgrade-help/src/global-data-preprocessing.js",
-    "node_modules/@11ty/eleventy-upgrade-help/src/indented-code-blocks.js",
-    "node_modules/@11ty/eleventy-upgrade-help/src/global-data-dot-file-names.js",
     "node_modules/@11ty/eleventy-upgrade-help/node_modules/supports-color/readme.md",
     "node_modules/@11ty/eleventy-upgrade-help/node_modules/has-flag/readme.md",
     "node_modules/@11ty/eleventy-upgrade-help/node_modules/color-name/README.md",
@@ -154,12 +160,6 @@
     "node_modules/minipass/README.md",
     "node_modules/filelist/node_modules/minimatch/README.md",
     "node_modules/filelist/node_modules/brace-expansion/README.md",
-    "node_modules/@11ty/eleventy/node_modules/posthtml/readme.md",
-    "node_modules/@11ty/eleventy/node_modules/posthtml-render/readme.md",
-    "node_modules/@11ty/eleventy/node_modules/posthtml-render/changelog.md",
-    "node_modules/@11ty/eleventy/node_modules/posthtml-parser/readme.md",
-    "node_modules/@11ty/eleventy/node_modules/entities/readme.md",
-    "node_modules/@11ty/eleventy/node_modules/htmlparser2/README.md",
     "_site/images/ultimate-dungeon-terrain-3.jpg",
     "_site/images/ultimate-dungeon-terrain-2.jpg",
     "_site/images/ultimate-dungeon-terrain-1.jpg",

package-lock.json

@@ -11,6 +11,7 @@
       "devDependencies": {
         "@11ty/eleventy": "^2.0.1",
         "@11ty/eleventy-plugin-rss": "^1.1.2",
+        "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
         "@11tyrocks/eleventy-plugin-emoji-readtime": "^1.0.1",
         "@tailwindcss/typography": "^0.5.0",
         "concurrently": "^7.0.0",
@@ -212,6 +213,19 @@
         "url": "https://opencollective.com/11ty"
       }
     },
+    "node_modules/@11ty/eleventy-plugin-syntaxhighlight": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-5.0.0.tgz",
+      "integrity": "sha512-y9BUmP1GofmbJgxM1+ky/UpFCpD8JSOeLeKItUs0WApgnrHk9haHziW7lS86lbArX5SiCVo4zTTw9x53gvRCaA==",
+      "dev": true,
+      "dependencies": {
+        "prismjs": "^1.29.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
     "node_modules/@11ty/eleventy-utils": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.2.tgz",
@@ -4193,6 +4207,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/promise": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
@@ -5901,6 +5924,15 @@
         "posthtml-urls": "1.0.0"
       }
     },
+    "@11ty/eleventy-plugin-syntaxhighlight": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-5.0.0.tgz",
+      "integrity": "sha512-y9BUmP1GofmbJgxM1+ky/UpFCpD8JSOeLeKItUs0WApgnrHk9haHziW7lS86lbArX5SiCVo4zTTw9x53gvRCaA==",
+      "dev": true,
+      "requires": {
+        "prismjs": "^1.29.0"
+      }
+    },
     "@11ty/eleventy-utils": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.2.tgz",
@@ -8884,6 +8916,12 @@
         "parse-ms": "^0.1.0"
       }
     },
+    "prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "dev": true
+    },
     "promise": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",

package.json

@@ -28,6 +28,7 @@
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",
     "@11ty/eleventy-plugin-rss": "^1.1.2",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "@11tyrocks/eleventy-plugin-emoji-readtime": "^1.0.1",
     "@tailwindcss/typography": "^0.5.0",
     "concurrently": "^7.0.0",

styles/main.css

@@ -1,3 +1,127 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/**
+ * Dracula Theme originally by Zeno Rocha [@zenorocha]
+ * https://draculatheme.com/
+ *
+ * Ported for PrismJS by Albert Vallverdu [@byverdu]
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #f8f8f2;
+	background: none;
+	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: 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: .5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #282a36;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #6272a4;
+}
+
+.token.punctuation {
+	color: #f8f8f2;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #ff79c6;
+}
+
+.token.boolean,
+.token.number {
+	color: #bd93f9;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #50fa7b;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+	color: #f8f8f2;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+	color: #f1fa8c;
+}
+
+.token.keyword {
+	color: #8be9fd;
+}
+
+.token.regex,
+.token.important {
+	color: #ffb86c;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+