From 9d493413c84e60fe287bf3a3c150663b552ea3f2 Mon Sep 17 00:00:00 2001 From: Devon Campbell Date: Mon, 24 Jun 2024 00:22:24 -0400 Subject: [PATCH] Add syntax highlighting --- .eleventy.js | 13 ++++ css/prism-synthwave84.css | 140 ++++++++++++++++++++++++++++++++++++++ package-lock.json | 15 ++++ package.json | 1 + 4 files changed, 169 insertions(+) create mode 100644 css/prism-synthwave84.css diff --git a/.eleventy.js b/.eleventy.js index b4d9775..65d3262 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -8,6 +8,7 @@ const markdownItEleventyImg = require("markdown-it-eleventy-img"); const pluginRss = require("@11ty/eleventy-plugin-rss"); const embedYouTube = require("eleventy-plugin-youtube-embed"); const sanitizeHtml = require("sanitize-html"); +const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); const metadata = require("./src/_data/metadata.json"); const sanitize = (html) => { @@ -20,6 +21,7 @@ const sanitize = (html) => { module.exports = function(eleventyConfig) { eleventyConfig.addPlugin(embedYouTube); eleventyConfig.addPlugin(pluginRss); + eleventyConfig.addPlugin(syntaxHighlight); eleventyConfig.addPassthroughCopy("css"); eleventyConfig.addPassthroughCopy("fonts"); @@ -108,6 +110,17 @@ module.exports = function(eleventyConfig) { return sortedMentions; }); + eleventyConfig.addTransform('includePrismTheme', function(content, outputPath) { + // Automatically inject the Prism theme CSS, but only in HTML files that need it. + if (outputPath.endsWith('.html') && content.includes('
'
+      );
+    }
+    return content;
+  });
+
   const markdownLibrary = markdownIt({ html: true })
     .use(markdownItAnchor, { slugify })
     .use(
diff --git a/css/prism-synthwave84.css b/css/prism-synthwave84.css
new file mode 100644
index 0000000..7f0595e
--- /dev/null
+++ b/css/prism-synthwave84.css
@@ -0,0 +1,140 @@
+/*
+ * Synthwave '84 Theme originally by Robb Owen [@Robb0wen] for Visual Studio Code
+ * Demo: https://marc.dev/demo/prism-synthwave84
+ *
+ * Ported for PrismJS by Marc Backes [@themarcba]
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #f92aad;
+	text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3;
+	background: none;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	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;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background-color: transparent !important;
+	background-image: linear-gradient(to bottom, #2a2139 75%, #34294f);
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #8e8e8e;
+}
+
+.token.punctuation {
+	color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.number,
+.token.unit,
+.token.hexcode,
+.token.deleted {
+	color: #e2777a;
+}
+
+.token.property,
+.token.selector {
+	color: #72f1b8;
+	text-shadow: 0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475;
+}
+
+.token.function-name {
+	color: #6196cc;
+}
+
+.token.boolean,
+.token.selector .token.id,
+.token.function {
+	color: #fdfdfd;
+	text-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975;
+}
+
+.token.class-name {
+	color: #fff5f6;
+	text-shadow: 0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75;
+}
+
+.token.constant,
+.token.symbol {
+	color: #f92aad;
+	text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3;
+}
+
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.selector .token.class,
+.token.builtin {
+	color: #f4eee4;
+	text-shadow: 0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+	color: #f87c32;
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+	color: #67cdcc;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.token.inserted {
+	color: green;
+}
diff --git a/package-lock.json b/package-lock.json
index 22f2fe2..50f0c52 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -160,6 +160,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.1",
       "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.1.tgz",
@@ -2506,6 +2515,12 @@
         "tunnel-agent": "^0.6.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",
diff --git a/package.json b/package.json
index 772d64d..a078ee1 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@11ty/eleventy": "^2.0.1",
     "@11ty/eleventy-fetch": "^4.0.1",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "@remy/webmention": "^1.5.0",
     "@sindresorhus/slugify": "^1.1.0",
     "eleventy-plugin-youtube-embed": "^1.8.0",