How to Extract Slot Text in Svelte 5?

[ryan-minato]

I'm building a component that converts Markdown into HTML. However, I noticed that when I use children(), it returns a Snippet object instead of raw text.

How can I extract the plain text from it?

For example, given the following usage:

<Markdown>
#markdown
</Markdown>

I want to retrieve just the "#markdown" string. What’s the best way to achieve this?

[brunnerh]

There is no way to retrieve the text without rendering the snippet first.
If you have dynamic Markdown, I would recommend using a regular string property.
There are also preprocessing tools that turn Markdown anywhere in the component into HTML, e.g. MDsveX.

You could also use a template string literal in a property, which is less pretty, e.g.:

<Markdown content={`
Markdown here
`} />

There are also tagged template literal utilities that can clean up indentation:

<Markdown content={unindent`
    Markdown here
`} />