Merge pull request #275 from andrewbranch/post/symbols

Shikiji

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

@@ -5,11 +5,10 @@ const bundlerPlugin = require("@11ty/eleventy-plugin-bundle");
 const eleventyImage = require("@11ty/eleventy-img");
 const getImageSize = require("image-size").default;
 const anchor = require("markdown-it-anchor").default;
-const { loadTheme } = require("shiki");
-const shikiMarkdown = require("markdown-it-shiki").default;
 const faviconsPlugin = require("eleventy-plugin-gen-favicons");
 const pluginRss = require("@11ty/eleventy-plugin-rss");
 const markdownIt = require("markdown-it");
+const { readFile } = require("fs/promises");
 const md = markdownIt({
 	html: true,
 });
@@ -122,18 +121,29 @@ module.exports = (eleventyConfig) => {
 
 	eleventyConfig.setLibrary("md", md);
 	eleventyConfig.amendLibrary("md", async (/** @type {import("markdown-it")} */ md) => {
-		const theme = await loadTheme(path.join(__dirname, "dark_modern.json"));
+		const { getHighlighter } = await import("shikiji");
+		const { fromHighlighter } = await import("markdown-it-shikiji/core");
+		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", kdl, "js", "json", "shell", "tsx", "typescript");
 		md.use(require("markdown-it-footnote"));
 		md.use(require("@ryanxcharles/markdown-it-katex"));
 		md.use(anchor, {
 			permalink: anchor.permalink.headerLink({
 				class: "no-underline",
 			}),
 		});
-		md.use(shikiMarkdown, {
-			theme,
-			useBackground: true,
-		});
+		md.use(
+			fromHighlighter(highlighter, {
+				theme: "dark-modern",
+				transformers: [transformerNotationDiff()],
+			}),
+		);
 	});
 
 	eleventyConfig.addPlugin(faviconsPlugin, {