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",