From 86779752c3d32c664d7adb225c231ee2cfd4777e Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Fri, 20 Jun 2025 10:58:19 -0400
Subject: [PATCH] add heading markdown element

---
 src/lib/markdown/renderers/Heading.svelte | 22 ++++++++++++++++++++++
 src/routes/blog/[slug]/+page.svelte       |  3 ++-
 2 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/markdown/renderers/Heading.svelte

diff --git a/src/lib/markdown/renderers/Heading.svelte b/src/lib/markdown/renderers/Heading.svelte
new file mode 100644
index 0000000..d844a25
--- /dev/null
+++ b/src/lib/markdown/renderers/Heading.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	interface Props {
+		depth: number;
+		text: string;
+	}
+
+	const { depth, text }: Props = $props();
+</script>
+
+{#if depth === 1}
+	<h1 class="mb-4 text-5xl font-bold underline">{text}</h1>
+{:else if depth === 2}
+	<h2 class="mb-3 text-4xl font-bold underline">{text}</h2>
+{:else if depth === 3}
+	<h3 class="mb-2 text-3xl font-semibold underline">{text}</h3>
+{:else if depth === 4}
+	<h4 class="mb-1 text-2xl font-semibold underline">{text}</h4>
+{:else if depth === 5}
+	<h5 class="mb-0.5 text-xl font-medium underline">{text}</h5>
+{:else if depth === 6}
+	<h6 class="mb-0.5 text-lg font-medium underline">{text}</h6>
+{/if}
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index 6ff532c..ba34e67 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import BlockQuote from '$lib/markdown/renderers/BlockQuote.svelte';
 	import Code from '$lib/markdown/renderers/Code.svelte';
+	import Heading from '$lib/markdown/renderers/Heading.svelte';
 	import Link from '$lib/markdown/renderers/Link.svelte';
 	import SvelteMarkdown from '@humanspeak/svelte-markdown';
 	import dayjs from 'dayjs';
@@ -20,7 +21,7 @@
 	<div class="w-full max-w-5xl px-4">
 		<SvelteMarkdown
 			source={data.post.body}
-			renderers={{ link: Link, code: Code, blockquote: BlockQuote }}
+			renderers={{ link: Link, code: Code, blockquote: BlockQuote, heading: Heading }}
 		/>
 	</div>
 </div>