svelte-exmarkdown v5

package.json

@@ -59,7 +59,7 @@
 		"shadcn-svelte": "1.0.0-next.4",
 		"svelte": "^5.20.2",
 		"svelte-check": "^4.0.0",
-		"svelte-exmarkdown": "^4.0.3",
+		"svelte-exmarkdown": "^5.0.0",
 		"svelte-sonner": "^0.3.28",
 		"tailwind-merge": "^3.0.1",
 		"tailwind-variants": "^0.3.1",

src/lib/components/markdown/renderer.svelte

@@ -1,34 +1,88 @@
 <script lang="ts">
 	import Markdown, { type ComponentsMap } from 'svelte-exmarkdown';
 	import { gfmPlugin } from 'svelte-exmarkdown/gfm';
-	import Ol from './ol.svelte';
-	import Li from './li.svelte';
-	import Ul from './ul.svelte';
-	import Strong from './strong.svelte';
-	import A from './a.svelte';
-	import H1 from './h1.svelte';
-	import H2 from './h2.svelte';
-	import H3 from './h3.svelte';
-	import H4 from './h4.svelte';
-	import H5 from './h5.svelte';
-	import H6 from './h6.svelte';
 	import CodeBlock from '../code-block.svelte';
+	import { cn } from '$lib/utils/shadcn';
 	let { md }: { md: string } = $props();
 
 	const renderer: ComponentsMap = {
 		code: CodeBlock,
-		ol: Ol,
-		li: Li,
-		ul: Ul,
-		strong: Strong,
-		a: A,
-		h1: H1,
-		h2: H2,
-		h3: H3,
-		h4: H4,
-		h5: H5,
-		h6: H6
 	};
 </script>
 
-<Markdown {md} plugins={[gfmPlugin(), { renderer }]} />
+<Markdown {md} plugins={[gfmPlugin(), { renderer }]}>
+	{#snippet ol(props)}
+		{@const { children, ...rest } = props}
+		<ol {...rest} class={cn('ml-4 list-outside list-decimal', rest.class)}>
+			{@render children?.()}
+		</ol>
+	{/snippet}
+	{#snippet ul(props)}
+		{@const { children, ...rest } = props}
+		<ul {...rest} class={cn('ml-4 list-outside list-decimal', rest.class)}>
+			{@render children?.()}
+		</ul>
+	{/snippet}
+	{#snippet li(props)}
+		{@const { children, ...rest } = props}
+		<li {...rest} class={cn('py-1', rest.class)}>
+			{@render children?.()}
+		</li>
+	{/snippet}
+
+	{#snippet strong(props)}
+		{@const { children, ...rest } = props}
+		<span {...rest} class={cn('font-semibold', rest.class)}>
+			{@render children?.()}
+		</span>
+	{/snippet}
+
+	{#snippet a(props)}
+		{@const { children, ...rest } = props}
+		<a
+			{...rest}
+			class={cn('text-blue-500 hover:underline', rest.class)}
+			target="_blank"
+			rel="noopener noreferrer"
+		>
+			{@render children?.()}
+		</a>
+	{/snippet}
+
+	{#snippet h1(props)}
+		{@const { children, ...rest } = props}
+		<h1 {...rest} class={cn('mb-2 mt-6 text-3xl font-semibold', rest.class)}>
+			{@render children?.()}
+		</h1>
+	{/snippet}
+	{#snippet h2(props)}
+		{@const { children, ...rest } = props}
+		<h2 {...rest} class={cn('mb-2 mt-6 text-2xl font-semibold', rest.class)}>
+			{@render children?.()}
+		</h2>
+	{/snippet}
+	{#snippet h3(props)}
+		{@const { children, ...rest } = props}
+		<h3 {...rest} class={cn('mb-2 mt-6 text-xl font-semibold', rest.class)}>
+			{@render children?.()}
+		</h3>
+	{/snippet}
+	{#snippet h4(props)}
+		{@const { children, ...rest } = props}
+		<h4 {...rest} class={cn('mb-2 mt-6 text-lg font-semibold', rest.class)}>
+			{@render children?.()}
+		</h4>
+	{/snippet}
+	{#snippet h5(props)}
+		{@const { children, ...rest } = props}
+		<h5 {...rest} class={cn('mb-2 mt-6 text-base font-semibold', rest.class)}>
+			{@render children?.()}
+		</h5>
+	{/snippet}
+	{#snippet h6(props)}
+		{@const { children, ...rest } = props}
+		<h6 {...rest} class={cn('mb-2 mt-6 text-sm font-semibold', rest.class)}>
+			{@render children?.()}
+		</h6>
+	{/snippet}
+</Markdown>