diff --git a/bun.lockb b/bun.lockb index dd316135..003538fb 100644 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/eleventy.config.js b/eleventy.config.js index 6614094f..4c63f8b2 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -1,6 +1,7 @@ // Installed Plugins import pluginRss from "@11ty/eleventy-plugin-rss"; import pluginEleventyNavigation from "@11ty/eleventy-navigation"; +import pluginSyntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight"; import pluginEmbedEverything from "eleventy-plugin-embed-everything"; import pluginMetagen from "eleventy-plugin-metagen"; import pluginEmojiReadTime from "@11tyrocks/eleventy-plugin-emoji-readtime"; @@ -17,6 +18,7 @@ export default function(eleventyConfig) { // Installed Plugins eleventyConfig.addPlugin(pluginRss); eleventyConfig.addPlugin(pluginEleventyNavigation); + eleventyConfig.addPlugin(pluginSyntaxHighlight, { preAttributes: { tabindex: 0 } }); eleventyConfig.addPlugin(pluginEmbedEverything, { add: ['soundcloud'] }); eleventyConfig.addPlugin(pluginMetagen); eleventyConfig.addPlugin(pluginEmojiReadTime); diff --git a/package.json b/package.json index 8d1a69bb..8efbf519 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@11ty/eleventy": "^3.0.0-beta.1", "@11ty/eleventy-navigation": "^0.3.5", "@11ty/eleventy-plugin-rss": "^2.0.2", + "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", "@11tyrocks/eleventy-plugin-emoji-readtime": "^1.0.1", "@uncenter/eleventy-plugin-toc": "^1.0.3", "@zachleat/details-utils": "^2.0.2", diff --git a/src/_includes/global/css-bundle.njk b/src/_includes/global/css-bundle.njk index bd793b6d..d7680dc1 100644 --- a/src/_includes/global/css-bundle.njk +++ b/src/_includes/global/css-bundle.njk @@ -4,6 +4,7 @@ "content", "plugins", "components", + "a11y-syntax-highlighting-dark", "pridesymbols", "utility" ] %} diff --git a/src/assets/css/a11y-syntax-highlighting-dark.css b/src/assets/css/a11y-syntax-highlighting-dark.css new file mode 100644 index 00000000..93014372 --- /dev/null +++ b/src/assets/css/a11y-syntax-highlighting-dark.css @@ -0,0 +1,188 @@ +/** + * a11y-dark theme for JavaScript, CSS, and HTML + * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css + * @author ericwbailey + */ + +/* + Theme + */ +code[class*="language-"], +pre[class*="language-"] { + color: #f8f8f2; + background: none; + 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: 0.5em 0; + overflow: auto; + border-radius: 0.3em; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #2b2b2b; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: 0.1em; + border-radius: 0.3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #d4d0ab; +} + +.token.punctuation { + color: #fefefe; +} + +.token.property, +.token.tag, +.token.constant, +.token.symbol, +.token.deleted { + color: #ffa07a; +} + +.token.boolean, +.token.number { + color: #00e0e0; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #abe338; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string, +.token.variable { + color: #00e0e0; +} + +.token.atrule, +.token.attr-value, +.token.function { + color: #ffd700; +} + +.token.keyword { + color: #00e0e0; +} + +.token.regex, +.token.important { + color: #ffd700; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} + + +/* + Plugin support + */ + +/* Line highlight */ +.line-highlight { + background: rgba(255, 217, 0, 0.10); + border-top: 1px solid rgba(255, 217, 0, 0.55); + border-bottom: 1px solid rgba(255, 217, 0, 0.55); +} + +/* Line numbers */ +.line-numbers .line-numbers-rows { + border-right: 1px solid #F8F8F2; +} + +.line-numbers-rows > span:before { + color: #D4D0AB; +} + + +/* + High contrast mode support +*/ +@media screen and (-ms-high-contrast: active) { + code[class*="language-"], + pre[class*="language-"] { + color: windowText; + background: window; + } + + :not(pre) > code[class*="language-"], + pre[class*="language-"] { + background: window; + } + + .token.important { + background: highlight; + color: window; + font-weight: normal; + } + + .token.atrule, + .token.attr-value, + .token.function, + .token.keyword, + .token.operator, + .token.selector { + font-weight: bold; + } + + .token.attr-value, + .token.comment, + .token.doctype, + .token.function, + .token.keyword, + .token.operator, + .token.property, + .token.string { + color: highlight; + } + + .token.attr-value, + .token.url { + font-weight: normal; + } +} diff --git a/src/statements/colophon.md b/src/statements/colophon.md index 6352dad5..7e195b05 100644 --- a/src/statements/colophon.md +++ b/src/statements/colophon.md @@ -1,7 +1,7 @@ --- title: Colophon keyword: colophon page -updated: 2024-07-27 +updated: 2024-08-02 toc: true eleventyNavigation: order: 14 @@ -25,6 +25,7 @@ Previously, this website was hosted on [Neocities](https://neocities.org/) until ## Plugins * Eleventy's official [RSS](https://www.11ty.dev/docs/plugins/rss/) plugin * Eleventy's official [Navigation](https://www.11ty.dev/docs/plugins/navigation/) plugin +* Eleventy's official [Syntax Highlighting](https://www.11ty.dev/docs/plugins/syntaxhighlight/) plugin * [@zachleat/details-utils](https://www.npmjs.com/package/@zachleat/details-utils) ### Eleventy Community Plugins @@ -45,6 +46,7 @@ Eleventy has the Markdown parser [markdown-it](https://www.npmjs.com/package/mar ## Self-hosted Assets * [Lexend](https://www.lexend.com/) font family — used as the default font of this site * [Intel One Mono](https://www.intel.com/content/www/us/en/company-overview/one-monospace-font.html) typeface — used as the monospaced font of this site +* Eric Bailey's [a11y-syntax-highlighting](https://github.com/ericwbailey/a11y-syntax-highlighting) CSS dark mode stylesheet for Prism.js ## JavaScript Due to this website being a static site, JavaScript is used to create dynamic and interactive components of this site. Here is a list of how JavaScript is used on this site: