Could not get Heading Level in Svelte Component

[BlenderBoi]

I could not get the Heading Levels in svelte component

Any Pointers for me?

[yenn01]

Hi there, not sure if this answers your question. I was trying to stylise each level of heading differently and was able to achieve that by passing a custom heading.svelte renderer which I adapted from the src.

customHeading.svelte

<script>
	export let depth;
	export let raw;
</script>

{#if depth === 1}
	<h1><slot /></h1>
{:else if depth === 2}
	<h2><slot /></h2>
{:else if depth === 3}
	<h3><slot /></h3>
{:else if depth === 4}
	<h4><slot /></h4>
{:else if depth === 5}
	<h5><slot /></h5>
{:else if depth === 6}
	<h6><slot /></h6>
{:else}
	{raw}
{/if}

<style>
	h1 {
		color: red;
	}
	h2 {
		color: green;
	}

	h3 {
		color: blue;
	}
</style>

yourMarkdownSvelteFile.svelte

<script>
	import SvelteMarkdown from 'svelte-markdown';
	import customHeading from './customHeading.svelte'
	const source =`# Header 1 
## Header 2
### Header 3
`;
</script>

<SvelteMarkdown {source} renderers={{ 
heading: customHeading
}}
/>

A REPL (unfortunately I can't get the REPL to work due to Slugger being removed from marked in v8.0.0 according to this.
https://svelte.dev/repl/3718389cd84a407b845424a8cf2335b8?version=4.2.1