code highlight

Author: andnorda

package.json

@@ -35,6 +35,7 @@
 		"@amplitude/analytics-browser": "^2.11.9",
 		"@nais/ds-svelte-community": "^0.7.5",
 		"date-fns": "^4.1.0",
+		"shiki": "^1.23.0",
 		"svelte-preprocess": "^6.0.3"
 	}
 }

src/routes/blog/posts/layout.svelte

@@ -26,4 +26,9 @@
 		flex-direction: column;
 		gap: 2rem;
 	}
+
+	:global(pre) {
+		overflow-x: auto;
+		padding: 0.5rem;
+	}
 </style>

svelte.config.js

@@ -1,8 +1,15 @@
 import adapter from "@sveltejs/adapter-static";
 import path from "path";
-import { mdsvex } from "mdsvex";
+import { mdsvex, escapeSvelte } from "mdsvex";
+import { createHighlighter } from "shiki";
 import remarkRelativeImages from "mdsvex-relative-images";
 
+const theme = "github-dark";
+const highlighter = await createHighlighter({
+	themes: [theme],
+	langs: ["javascript", "typescript", "yaml", "bash", "ts", "elm", "sh", "shell"],
+});
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://github.com/sveltejs/svelte-preprocess
@@ -13,6 +20,12 @@ const config = {
 			extensions: [".svx", ".md", ".mdx"],
 			remarkPlugins: [remarkRelativeImages],
 			layout: "/src/routes/blog/posts/layout.svelte",
+			highlight: {
+				highlighter: async (code, lang = "text") => {
+					const html = escapeSvelte(highlighter.codeToHtml(code, { lang, theme }));
+					return `{@html \`${html}\` }`;
+				},
+			},
 		}),
 	],