Add kdl syntax highlighting and diff transformer

Author: andrewbranch

.vscode/settings.json

@@ -1,6 +1,9 @@
 {
 	"typescript.tsdk": "node_modules/typescript/lib",
-	"editor.formatOnSave": true,
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
-	"editor.tabSize": 2
+	"editor.tabSize": 2,
+	"editor.formatOnSave": true,
+	"[markdown]": {
+		"editor.formatOnSave": false
+	}
 }

content/styles/main.css

@@ -234,9 +234,20 @@ blockquote {
 pre {
 	line-height: var(--rhythm);
 	font-size: 0.75rem;
-	padding: calc(var(--rhythm) * 0.5rem);
 	border-radius: calc(var(--rhythm) * 0.25rem);
 	overflow: auto;
+	padding: calc(var(--rhythm) * 0.5rem) 0;
+}
+pre code .line {
+	display: inline-block;
+	width: 100%;
+	padding: 0 calc(var(--rhythm) * 0.5rem);
+}
+pre code .line:last-child {
+	display: none; /* shikiji is adding a blank line at the end for some reason */
+}
+pre code .line.diff.add {
+	background-color: rgb(150 255 100 / 0.15);
 }
 
 .post-body ol,
@@ -288,15 +299,32 @@ figcaption {
 	display: inline;
 	font-size: 0.9rem;
 }
+
+.post-body ol {
+	list-style-type: decimal;
+}
+.post-body ol ol {
+	margin: 0 0 0 calc(var(--rhythm) * 0.8rem);
+	list-style-type: lower-alpha;
+}
+.post-body ol ol ol {
+	list-style-type: lower-roman;
+}
+.post-body ol ol ol ol {
+	list-style-type: lower-greek;
+}
+.post-body ol ol li {
+	margin-bottom: 0;
+}
 /* #endregion */
 
 /* #endregion */
 
 /* #region: inlines */
 code {
 	font-family: var(--font-mono);
-	font-variant-ligatures: "none";
-	font-feature-settings: "normal";
+	font-variant-ligatures: none;
+	font-feature-settings: normal;
 }
 
 :not(pre) > code {

eleventy.config.js

@@ -123,10 +123,14 @@ module.exports = (eleventyConfig) => {
 	eleventyConfig.amendLibrary("md", async (/** @type {import("markdown-it")} */ md) => {
 		const { getHighlighter } = await import("shikiji");
 		const { fromHighlighter } = await import("markdown-it-shikiji/core");
-		const highlighter = await getHighlighter();
+		const { transformerNotationDiff } = await import("shikiji-transformers");
+		const highlighter = await getHighlighter({
+			langAlias: { kdl: "KDL" },
+		});
 		const theme = JSON.parse(await readFile(path.join(__dirname, "dark_modern.json"), "utf8"));
+		const kdl = JSON.parse(await readFile(require.resolve("kdl/syntaxes/kdl.tmLanguage.json"), "utf8"));
 		await highlighter.loadTheme(theme);
-		await highlighter.loadLanguage("css", "js", "json", "shell", "tsx", "typescript");
+		await highlighter.loadLanguage("css", kdl, "js", "json", "shell", "tsx", "typescript");
 		md.use(require("markdown-it-footnote"));
 		md.use(require("@ryanxcharles/markdown-it-katex"));
 		md.use(anchor, {
@@ -137,6 +141,7 @@ module.exports = (eleventyConfig) => {
 		md.use(
 			fromHighlighter(highlighter, {
 				theme: "dark-modern",
+				transformers: [transformerNotationDiff()],
 			}),
 		);
 	});

package-lock.json

@@ -26,13 +26,15 @@
 		"eleventy-plugin-gen-favicons": "^1.1.2",
 		"image-size": "*",
 		"katex": "^0.16.9",
+		"kdl": "github:kdl-org/vscode-kdl",
 		"markdown-it": "^13.0.2",
 		"markdown-it-anchor": "^8.6.7",
 		"markdown-it-footnote": "^3.0.3",
 		"markdown-it-shikiji": "^0.9.11",
 		"npm-run-all": "^4.1.5",
 		"prettier": "^3.0.3",
 		"shikiji": "^0.9.11",
+		"shikiji-transformers": "^0.9.11",
 		"unocss": "^0.57.2"
 	}
 }