baobeld/benjaminpalko
1
0
Fork 0
Code Pull requests Packages 2 Activity Actions

add heading markdown element

Browse source
This commit is contained in:
Benjamin Palko 2025-06-20 10:58:19 -04:00
parent 07cd9e9d52
commit 86779752c3
2 changed files with 24 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/lib/markdown/renderers/Heading.svelte Normal file
View file

@ -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}

3
src/routes/blog/[slug]/+page.svelte
View file

@ -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>