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