switch to svelte markdown

src/lib/markdown/renderers/BlockQuote.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	interface Props {
+		text?: string;
+	}
+
+	const { text }: Props = $props();
+</script>
+
+<blockquote class="bg-base-200 border-base-300 text-base-content rounded-lg border-l-4 p-4">
+	<p class="text-gray-700">{text}</p>
+</blockquote>

src/lib/markdown/renderers/Code.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	interface Props {
+		lang?: string;
+		text?: string;
+	}
+
+	const { text = '' }: Props = $props();
+</script>
+
+<div class="mockup-code w-full">
+	{#each text.split('\n') as line, index (index)}
+		<pre data-prefix={index + 1}><code>{line}</code></pre>
+	{/each}
+</div>

src/lib/markdown/renderers/Link.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children?: Snippet;
+		href?: string;
+		title?: string;
+	}
+
+	const { href = '', title = '', children }: Props = $props();
+</script>
+
+<a {href} {title} class="link link-primary">
+	{@render children?.()}
+</a>

src/routes/blog/[slug]/+page.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
+	import BlockQuote from '$lib/markdown/renderers/BlockQuote.svelte';
+	import Code from '$lib/markdown/renderers/Code.svelte';
+	import Link from '$lib/markdown/renderers/Link.svelte';
+	import SvelteMarkdown from '@humanspeak/svelte-markdown';
 	import dayjs from 'dayjs';
-	import { compile } from 'mdsvex';
 	import type { PageProps } from './$types';
 
 	let { data }: PageProps = $props();
@@ -15,11 +18,9 @@
 	</div>
 	<img class="aspect-4/2 w-full object-cover" src={post.image.url} alt={post.image.alt} />
 	<div class="w-full max-w-5xl px-4">
-		{#await compile(post.body)}
-			<div class="skeleton h-48 w-full"></div>
-		{:then content}
-			<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-			{@html content?.code}
-		{/await}
+		<SvelteMarkdown
+			source={data.post.body}
+			renderers={{ link: Link, code: Code, blockquote: BlockQuote }}
+		/>
 	</div>
 </div>