Need Documentation on Markdown Custom Styling

[SilasReinagel]

It's not clear how to provide custom styling for the generated markdown.

[magnetenstad]

My solution was to use global.

<!-- a source that includes a h1 -->
<SvelteMarkdown {source}></SvelteMarkdown>

<style>
  :global(h1) {
    color: red;
  }
</style>

[pablo-abc]

I'll add this to the README. But the approach is either what @magnetenstad mentioned, or using your own custom renderer for the element you want. E.g. if you want to style paragraphs you'd create your renderer:

<!-- Paragraph.svelte -->
<p><slot /></p>

<style>
  p {
    color: red;
  }
</style>

And then pass it to SvelteMarkdown using the renderers prop:

<SvelteMarkdown source={source} renderers={{ paragraph: Paragraph }} />

You can use the default renderers as reference.

[SilasReinagel]

@pablo-abc Perfect! Thank you for the guidance on that.

[nkitsaini]

Adding here in-case someone stumbles upon this issue and wants a quick solution. It's exactly the same as solution by @magnetenstad but keeps the style local to current element.

// Required: id should be unique here
<div id="markdown-container">
	<SvelteMarkdown source={tokens} />
</div>

<style>
        // Similarly you can style other elements
	:global(#markdown-container  h1) {
		color: red;
	}
</style>