From 13e3e1a2da8f52186191552bd0248970dded47b9 Mon Sep 17 00:00:00 2001 From: Joshua Seigler Date: Thu, 10 Jul 2025 23:50:28 -0400 Subject: [PATCH] code block line numbers --- eleventy.config.js | 33 ++++------------- package-lock.json | 29 +++++++-------- package.json | 2 +- site/_includes/css/prism.css | 35 +++++++++++++++++-- .../index.md | 4 +-- 5 files changed, 56 insertions(+), 47 deletions(-) diff --git a/eleventy.config.js b/eleventy.config.js index 2ac05a2..530d1f2 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -5,14 +5,14 @@ import mdAnchor from "markdown-it-anchor" import { spoiler as mdSpoiler } from "@mdit/plugin-spoiler" import { footnote as mdFootnote } from "@mdit/plugin-footnote" import mdLinkAttributes from "markdown-it-link-attributes" -import mdPrism from "markdown-it-prism" import dayjs from "dayjs" import utc from "dayjs/plugin/utc.js" import clean from "eleventy-plugin-clean" import toc from "eleventy-plugin-toc" import EleventyFeedPlugin from "@11ty/eleventy-plugin-rss" -import EleventyVitePlugin from "@11ty/eleventy-plugin-vite" import { eleventyImageTransformPlugin } from "@11ty/eleventy-img" +import EleventySyntaxHighlightPlugin from "@11ty/eleventy-plugin-syntaxhighlight" +import EleventyVitePlugin from "@11ty/eleventy-plugin-vite" import { ViteMinifyPlugin } from "vite-plugin-minify" import { execSync } from "child_process" import fetch from "@11ty/eleventy-fetch" @@ -49,7 +49,6 @@ export default async (config) => { rel: "noopener", }, }) - .use(mdPrism) mdLib.renderer.rules.render_footnote_anchor = ( tokens, idx, @@ -126,30 +125,6 @@ export default async (config) => { ) }) - // config.addShortcode( - // "image", - // function imageShortcode(src, alt, sizes, loading, classNames, inputPath) { - // const file = relativeToInputPath(inputPath ?? this.page.inputPath, src) - // const formats = ["avif", "auto"] - // const imageOptions = { - // widths: [125, 250, 500, "auto"], - // formats, - // outputDir: path.join(config.dir.output, "img"), - // } - // EleventyImage(file, imageOptions) // async but we won't await it - // const metadata = EleventyImage.statsSync(file, imageOptions) - // const imageAttributes = { - // alt, - // sizes, - // loading, - // decoding: "async", - // ...(classNames ? { class: classNames } : {}), - // } - - // return EleventyImage.generateHTML(metadata, imageAttributes) - // } - // ) - config.addFilter("toISOString", (dateString) => { return new Date(dateString).toISOString() }) @@ -189,6 +164,10 @@ export default async (config) => { config.addPlugin(EleventyFeedPlugin) + config.addPlugin(EleventySyntaxHighlightPlugin, { + alwaysWrapLineHighlights: true, + }) + config.addPlugin(EleventyVitePlugin, { viteOptions: { appType: "mpa", diff --git a/package-lock.json b/package-lock.json index dbc864f..872bbf5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@11ty/eleventy-fetch": "^5.1.0", "@11ty/eleventy-img": "^6.0.4", "@11ty/eleventy-plugin-rss": "^2.0.4", + "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.1", "@11ty/eleventy-plugin-vite": "^6.0.0", "@mdit/plugin-footnote": "^0.22.0", "@mdit/plugin-spoiler": "^0.21.0", @@ -25,7 +26,6 @@ "gh-pages": "^6.3.0", "markdown-it-anchor": "^9.0.1", "markdown-it-link-attributes": "^4.0.1", - "markdown-it-prism": "^3.0.0", "pagefind": "^1.3.0", "vite-plugin-minify": "^2.1.0" } @@ -230,6 +230,20 @@ "url": "https://opencollective.com/11ty" } }, + "node_modules/@11ty/eleventy-plugin-syntaxhighlight": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-5.0.1.tgz", + "integrity": "sha512-xDPF3Ay38XlmWZe9ER0SLtMmNah7olUBlGORhUiCUkPh3jYGVCDTDayi4tbFI9Dxha8NwKlfBZ2FXM/s3aZzAg==", + "dev": true, + "license": "MIT", + "dependencies": { + "prismjs": "^1.30.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/11ty" + } + }, "node_modules/@11ty/eleventy-plugin-vite": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-vite/-/eleventy-plugin-vite-6.0.0.tgz", @@ -3895,19 +3909,6 @@ "dev": true, "license": "MIT" }, - "node_modules/markdown-it-prism": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/markdown-it-prism/-/markdown-it-prism-3.0.0.tgz", - "integrity": "sha512-M0LQsbVzjbzufV95nYdtbs99Sm/8f7zLnqFblb5yQZtFTGLM+y6hxMZ8BdujY3FFqVvTbnZ52/uoicQUqZUYbg==", - "dev": true, - "license": "MIT", - "dependencies": { - "prismjs": "1.30.0" - }, - "engines": { - "node": ">=20.0.0" - } - }, "node_modules/markdown-it/node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", diff --git a/package.json b/package.json index 4e4a8ab..e202fca 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@11ty/eleventy-fetch": "^5.1.0", "@11ty/eleventy-img": "^6.0.4", "@11ty/eleventy-plugin-rss": "^2.0.4", + "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.1", "@11ty/eleventy-plugin-vite": "^6.0.0", "@mdit/plugin-footnote": "^0.22.0", "@mdit/plugin-spoiler": "^0.21.0", @@ -29,7 +30,6 @@ "gh-pages": "^6.3.0", "markdown-it-anchor": "^9.0.1", "markdown-it-link-attributes": "^4.0.1", - "markdown-it-prism": "^3.0.0", "pagefind": "^1.3.0", "vite-plugin-minify": "^2.1.0" }, diff --git a/site/_includes/css/prism.css b/site/_includes/css/prism.css index 201b5b6..8b8e995 100644 --- a/site/_includes/css/prism.css +++ b/site/_includes/css/prism.css @@ -7,7 +7,7 @@ pre[class*="language-"] { word-break: normal; word-wrap: normal; font-size: 0.8rem; - line-height: 1.5em; + line-height: 1.4; color: var(--c-text-dim); -moz-tab-size: 4; -o-tab-size: 4; @@ -20,7 +20,7 @@ pre[class*="language-"] { :not(pre) > code[class*="language-"] { background: var(--c-text-background-light); white-space: normal; - border-radius: 0.2em; + border-radius: 0.2rem; padding: 0.1em; } pre[class*="language-"] { @@ -28,8 +28,37 @@ pre[class*="language-"] { overflow: auto; position: relative; margin: 0.5em 0; - padding: 1.25em 1em; + padding: 0.5em 1em 0.5em calc(var(--lineNumWidth) + 0.25rem); box-shadow: inset 0 0 6rem -2rem var(--c-highlight); + counter-reset: lineNumber; + --places: 1; + &:has(.highlight-line:nth-child(10)) { --places: 2 } + &:has(.highlight-line:nth-child(100)) { --places: 3 } + &:has(.highlight-line:nth-child(1000)) { --places: 4 } + --lineNumWidth: calc(1em + var(--places) * 1ch); + &::before { + content: ''; + position: absolute; + height: 100%; + top: 0; + left: var(--lineNumWidth); + width: 3rem; + opacity: 0.125; + z-index: -1; + background: linear-gradient(to right, var(--c-highlight), transparent); + border-radius: 0.5em; + } + .highlight-line { + position: relative; + } + .highlight-line::before { + content: counter(lineNumber); + counter-increment: lineNumber; + position: absolute; + top: 0; + right: calc(100% + 0.5em); + color: var(--c-highlight); + } } p:has(+ pre[class*="language-"]) > code { margin: 0; diff --git a/site/posts/2025-06-15-replacing-github-pages/index.md b/site/posts/2025-06-15-replacing-github-pages/index.md index 9cd51fe..8e9bd58 100644 --- a/site/posts/2025-06-15-replacing-github-pages/index.md +++ b/site/posts/2025-06-15-replacing-github-pages/index.md @@ -33,14 +33,14 @@ Here is the Caddyfile I made---you will need to change the domain names and the ```caddy # Global options block { - email you@example.com # <<<< CHANGE THIS <<<< + email you@example.com #### CHANGE THIS #### on_demand_tls { ask http://localhost/check } } # Webhooks -https://webhooks.subdomain.here.tld { <<<< CHANGE THIS <<<< +https://webhooks.subdomain.here.tld { #### CHANGE THIS #### reverse_proxy localhost:9000 }