From 43f290526b1496d9da9686d92022864fbd674a80 Mon Sep 17 00:00:00 2001 From: giteaadmin Date: Sun, 24 Aug 2025 22:44:22 -0400 Subject: [PATCH] feat: add syntax highlighting plugin and styles for code blocks --- .eleventy.js | 3 + package-lock.json | 21 +++++++ package.json | 7 ++- src/_includes/layout.njk | 1 + src/css/prism-tomorrow.css | 122 +++++++++++++++++++++++++++++++++++++ 5 files changed, 151 insertions(+), 3 deletions(-) create mode 100644 src/css/prism-tomorrow.css diff --git a/.eleventy.js b/.eleventy.js index 5802eb0..89ff8ed 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,5 +1,6 @@ module.exports = function(eleventyConfig) { const { createProxyMiddleware } = require('http-proxy-middleware'); + const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); // Pass through static assets from the "src" directory eleventyConfig.addPassthroughCopy("src/css"); @@ -10,6 +11,8 @@ module.exports = function(eleventyConfig) { eleventyConfig.addPassthroughCopy({ 'src/robots.txt': '/robots.txt' }); eleventyConfig.addPassthroughCopy({ 'src/sitemap.xml': '/sitemap.xml' }); + eleventyConfig.addPlugin(syntaxHighlight); + // Add a filter for readable dates using vanilla JS eleventyConfig.addFilter("readableDate", dateObj => { // The toLocaleDateString method can be used to format dates diff --git a/package-lock.json b/package-lock.json index b5d7c57..a03e47d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "ISC", "dependencies": { "@11ty/eleventy": "^2.0.1", + "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2", "cors": "^2.8.5", "express": "^4.21.2", "fs-extra": "^11.3.1" @@ -107,6 +108,18 @@ "url": "https://opencollective.com/11ty" } }, + "node_modules/@11ty/eleventy-plugin-syntaxhighlight": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-5.0.2.tgz", + "integrity": "sha512-T6xVVRDJuHlrFMHbUiZkHjj5o1IlLzZW+1IL9eUsyXFU7rY2ztcYhZew/64vmceFFpQwzuSfxQOXxTJYmKkQ+A==", + "dependencies": { + "prismjs": "^1.30.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/11ty" + } + }, "node_modules/@11ty/eleventy-utils": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.3.tgz", @@ -2196,6 +2209,14 @@ "node": ">= 4" } }, + "node_modules/prismjs": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz", + "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==", + "engines": { + "node": ">=6" + } + }, "node_modules/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 a3e07b2..7154c9c 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "1.0.0", "description": "An Eleventy project with Docker and VS Code debugging.", "scripts": { - "start": "eleventy --serve --watch", + "start": "eleventy --serve", "debug": "node --inspect=0.0.0.0:9229 ./node_modules/.bin/eleventy --serve --watch", "build": "eleventy" }, @@ -12,12 +12,13 @@ "license": "ISC", "dependencies": { "@11ty/eleventy": "^2.0.1", + "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2", "cors": "^2.8.5", "express": "^4.21.2", "fs-extra": "^11.3.1" }, "devDependencies": { - "nodemon": "^3.1.0", - "http-proxy-middleware": "^3.0.0" + "http-proxy-middleware": "^3.0.0", + "nodemon": "^3.1.0" } } diff --git a/src/_includes/layout.njk b/src/_includes/layout.njk index 6ec6d6c..d45a8d6 100644 --- a/src/_includes/layout.njk +++ b/src/_includes/layout.njk @@ -47,6 +47,7 @@ + diff --git a/src/css/prism-tomorrow.css b/src/css/prism-tomorrow.css new file mode 100644 index 0000000..a0eeff0 --- /dev/null +++ b/src/css/prism-tomorrow.css @@ -0,0 +1,122 @@ +/** + * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML + * Based on https://github.com/chriskempson/tomorrow-theme + * @author Rose Pritchard + */ + +code[class*="language-"], +pre[class*="language-"] { + color: #ccc; + 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: #2d2d2d; +} + +/* 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: #999; +} + +.token.punctuation { + color: #ccc; +} + +.token.tag, +.token.attr-name, +.token.namespace, +.token.deleted { + color: #e2777a; +} + +.token.function-name { + color: #6196cc; +} + +.token.boolean, +.token.number, +.token.function { + color: #f08d49; +} + +.token.property, +.token.class-name, +.token.constant, +.token.symbol { + color: #f8c555; +} + +.token.selector, +.token.important, +.token.atrule, +.token.keyword, +.token.builtin { + color: #cc99cd; +} + +.token.string, +.token.char, +.token.attr-value, +.token.regex, +.token.variable { + color: #7ec699; +} + +.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; +}