diff --git a/.eleventy.js b/.eleventy.js index c60544e..4f0b1cb 100644 --- a/.eleventy.js +++ b/.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"); diff --git a/.obsidian/workspace.json b/.obsidian/workspace.json index 4b09912..e18c32a 100644 --- a/.obsidian/workspace.json +++ b/.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", diff --git a/package-lock.json b/package-lock.json index 05089da..7c56d01 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index ba0c931..532821e 100644 --- a/package.json +++ b/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", diff --git a/styles/main.css b/styles/main.css index b5c61c9..0240c39 100644 --- a/styles/main.css +++ b/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; +} +