add markdown formatting with code support

src/routes/blog/[slug]/+page.server.ts

@@ -1,6 +1,7 @@
 import { db } from '$lib/server/db';
 import { blogArticles } from '$lib/server/db/schema';
 import { isAdmin } from '$lib/server/auth';
+import { renderMarkdown } from '$lib/server/markdown';
 import { eq } from 'drizzle-orm';
 
 import type { PageServerLoad } from './$types.js';
@@ -28,6 +29,7 @@ export const load: PageServerLoad = async (event) => {
 
 	return {
 		blogArticle: article,
+		contentHtml: renderMarkdown(article.content ?? ''),
 		isAdmin: admin
 	};
 };

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
+	import 'highlight.js/styles/github-dark.css';
 
 	let { data } = $props();
 </script>
@@ -17,5 +18,7 @@
 		{/if}
 	</div>
 	<p class="mb-6 text-sm text-gray-500">{data.blogArticle.createdAt?.toDateString()}</p>
-	<div class="whitespace-pre-wrap">{data.blogArticle.content}</div>
+	<div class="prose prose-neutral max-w-none">
+		{@html data.contentHtml}
+	</div>
 </article>

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

@@ -52,7 +52,9 @@
 			name="content"
 			bind:value={content}
 			rows="20"
-			class="rounded border border-gray-300 px-3 py-2 font-mono text-sm outline-none"></textarea>
+			class="rounded border border-gray-300 px-3 py-2 font-body text-base leading-relaxed text-gray-900 outline-none"
+		></textarea>
+		<p class="-mt-2 text-xs text-gray-400">Supports Markdown formatting.</p>
 
 		<div class="flex justify-end gap-2">
 			<button