add shiki

src/app.css

@@ -7,19 +7,19 @@
 		@apply scroll-smooth antialiased;
 	}
 
-	/* Nord theme inspired syntax highlighting */
+	/* Shiki code blocks */
 	pre {
-		@apply rounded-lg border border-zinc-800 bg-zinc-900/50 p-4;
-	}
-
-	code {
-		@apply rounded bg-zinc-800 px-1 py-0.5 text-sm;
+		@apply my-4 overflow-x-auto rounded-lg border border-zinc-800 bg-zinc-900/50 p-4 text-sm;
 	}
 
 	pre code {
 		@apply block bg-transparent p-0;
 	}
 
+	:not(pre) > code {
+		@apply rounded bg-zinc-800 px-1.5 py-0.5 text-sm text-emerald-400;
+	}
+
 	/* Custom scrollbar */
 	::-webkit-scrollbar {
 		@apply w-2;
@@ -36,4 +36,40 @@
 	::-webkit-scrollbar-thumb:hover {
 		@apply bg-zinc-600;
 	}
+
+	/* Shiki theme overrides */
+	.shiki {
+		@apply bg-transparent text-zinc-100;
+		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+			'Courier New', monospace;
+	}
+
+	.shiki .line {
+		@apply min-h-[1.5rem] whitespace-pre;
+	}
+
+	.shiki .line:empty::after {
+		content: '\00a0';
+	}
+
+	/* Nord theme color overrides */
+	.shiki .function {
+		@apply text-blue-400;
+	}
+
+	.shiki .string {
+		@apply text-emerald-400;
+	}
+
+	.shiki .comment {
+		@apply text-zinc-500;
+	}
+
+	.shiki .keyword {
+		@apply text-purple-400;
+	}
+
+	.shiki .number {
+		@apply text-orange-400;
+	}
 }

svelte.config.js

@@ -1,6 +1,7 @@
 import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-import { mdsvex } from 'mdsvex';
+import { mdsvex, escapeSvelte } from 'mdsvex';
+import { createHighlighter } from 'shiki';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -9,7 +10,18 @@ const config = {
 	preprocess: [
 		vitePreprocess(),
 		mdsvex({
-			extensions: ['.md', '.svx']
+			extensions: ['.md', '.svx'],
+			highlight: {
+				highlighter: async (code, lang = 'text') => {
+					const highlighter = await createHighlighter({
+						themes: ['nord'],
+						langs: ['typescript', 'svelte']
+					});
+					await highlighter.loadLanguage('typescript', 'svelte');
+					const html = escapeSvelte(highlighter.codeToHtml(code, { lang, theme: 'nord' }));
+					return `{@html \`${html}\` }`;
+				}
+			}
 		})
 	],