better

package.json

@@ -31,7 +31,6 @@
 		"@tailwindcss/vite": "^4.0.0",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/svelte": "^5.2.4",
-		"@types/markdown-it": "^14.1.2",
 		"@vercel/functions": "^2.2.0",
 		"clsx": "^2.1.1",
 		"concurrently": "^9.1.2",
@@ -43,7 +42,6 @@
 		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^16.0.0",
 		"jsdom": "^26.0.0",
-		"markdown-it": "^14.1.0",
 		"melt": "^0.35.0",
 		"mode-watcher": "^1.0.8",
 		"neverthrow": "^8.2.0",
@@ -80,6 +78,7 @@
 		"@fontsource-variable/open-sans": "^5.2.6",
 		"better-auth": "^1.2.9",
 		"convex-helpers": "^0.1.94",
+		"markdown-it-async": "^2.2.0",
 		"openai": "^5.3.0",
 		"zod": "^3.25.64"
 	}

pnpm-lock.yaml

@@ -38,6 +38,9 @@ importers:
       convex-helpers:
         specifier: ^0.1.94
         version: 0.1.94(convex@1.24.8)(typescript@5.8.3)(zod@3.25.64)
+      markdown-it-async:
+        specifier: ^2.2.0
+        version: 2.2.0
       openai:
         specifier: ^5.3.0
         version: 5.3.0(ws@8.18.2)(zod@3.25.64)
@@ -87,9 +90,6 @@ importers:
       '@testing-library/svelte':
         specifier: ^5.2.4
         version: 5.2.8(svelte@5.34.1)(vite@6.3.5(@types/node@24.0.1)(jiti@2.4.2)(lightningcss@1.30.1))(vitest@3.2.3(@types/node@24.0.1)(jiti@2.4.2)(jsdom@26.1.0)(lightningcss@1.30.1))
-      '@types/markdown-it':
-        specifier: ^14.1.2
-        version: 14.1.2
       '@vercel/functions':
         specifier: ^2.2.0
         version: 2.2.0
@@ -123,9 +123,6 @@ importers:
       jsdom:
         specifier: ^26.0.0
         version: 26.1.0
-      markdown-it:
-        specifier: ^14.1.0
-        version: 14.1.0
       melt:
         specifier: ^0.35.0
         version: 0.35.0(@floating-ui/dom@1.7.1)(svelte@5.34.1)
@@ -4297,7 +4294,6 @@ snapshots:
     dependencies:
       '@types/markdown-it': 14.1.2
       markdown-it: 14.1.0
-    optional: true
 
   markdown-it@14.1.0:
     dependencies:

src/lib/components/ui/card/card.svelte

@@ -5,6 +5,9 @@
 	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
 </script>
 
-<div class={cn('bg-card flex flex-col gap-4 rounded-lg border-border border p-4', className)} {...restProps}>
+<div
+	class={cn('bg-card border-border flex flex-col gap-4 rounded-lg border p-4', className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

src/lib/utils/markdown.svelte.ts

@@ -0,0 +1,35 @@
+import { fromAsyncCodeToHtml } from '@shikijs/markdown-it/async';
+import MarkdownItAsync from 'markdown-it-async';
+import type { Getter } from 'runed';
+import { codeToHtml } from 'shiki';
+
+const md = MarkdownItAsync();
+
+md.use(
+	fromAsyncCodeToHtml(
+		// Pass the codeToHtml function
+		codeToHtml,
+		{
+			themes: {
+				light: 'github-light-default',
+				dark: 'github-dark-default',
+			},
+		}
+	)
+);
+
+export class Markdown {
+	highlighted = $state<string | null>(null);
+
+	constructor(readonly code: Getter<string>) {
+		$effect(() => {
+			md.renderAsync(this.code()).then((html) => {
+				this.highlighted = html;
+			});
+		});
+	}
+
+	get current() {
+		return this.highlighted;
+	}
+}

src/lib/utils/markdown.ts

@@ -1,46 +0,0 @@
-import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
-import { fromHighlighter } from '@shikijs/markdown-it/core';
-import MarkdownIt from 'markdown-it';
-import { createHighlighterCore } from 'shiki/core';
-import type { Getter } from 'runed';
-
-const bundledLanguages = {
-	bash: () => import('@shikijs/langs/bash'),
-	diff: () => import('@shikijs/langs/diff'),
-	javascript: () => import('@shikijs/langs/javascript'),
-	json: () => import('@shikijs/langs/json'),
-	svelte: () => import('@shikijs/langs/svelte'),
-	typescript: () => import('@shikijs/langs/typescript'),
-};
-
-/** A preloaded highlighter instance. */
-export const highlighter = createHighlighterCore({
-	themes: [
-		import('@shikijs/themes/github-light-default'),
-		import('@shikijs/themes/github-dark-default'),
-	],
-	langs: Object.entries(bundledLanguages).map(([_, lang]) => lang),
-	engine: createJavaScriptRegexEngine(),
-});
-
-const md = MarkdownIt();
-
-highlighter.then((h) => {
-	md.use(
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		fromHighlighter(h as any, {
-			themes: {
-				light: 'github-light-default',
-				dark: 'github-dark-default',
-			},
-		})
-	);
-});
-
-export class Markdown {
-	constructor(readonly code: Getter<string>) {}
-
-	get current() {
-		return md.render(this.code());
-	}
-}

src/routes/chat/[id]/loading-dots.svelte

@@ -1,11 +1,11 @@
 <div class="flex place-items-center gap-2 p-2">
-    <div
-        class="bg-accent animation-delay-0 size-2.5 animate-[bounce_0.75s_ease-in-out_infinite] rounded-full"
-    ></div>
-    <div
-        class="bg-accent animation-delay-100 size-2.5 animate-[bounce_0.75s_ease-in-out_infinite] rounded-full"
-    ></div>
-    <div
-        class="bg-accent animation-delay-200 size-2.5 animate-[bounce_0.75s_ease-in-out_infinite] rounded-full"
-    ></div>
-</div>
+	<div
+		class="bg-accent animation-delay-0 size-2.5 animate-[bounce_0.75s_ease-in-out_infinite] rounded-full"
+	></div>
+	<div
+		class="bg-accent animation-delay-100 size-2.5 animate-[bounce_0.75s_ease-in-out_infinite] rounded-full"
+	></div>
+	<div
+		class="bg-accent animation-delay-200 size-2.5 animate-[bounce_0.75s_ease-in-out_infinite] rounded-full"
+	></div>
+</div>

src/routes/chat/[id]/markdown-renderer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Markdown } from '$lib/utils/markdown';
+	import { Markdown } from '$lib/utils/markdown.svelte';
 
 	type Props = {
 		content: string;