svelte-markdown
svelte-markdown copied to clipboard
HTML Output Missing Styles
Hello. There is either a bug or config problem that is preventing the styles from being applied. Here's a screenshot that shows what is displayed, which shows that the styles are missing.

And below is the raw HTML output, which shows that some HTML is being generated, but it's not rendering correctly; and it's filled with a bunch of unnecessary parser tags. Please help.
<!--<Parser>-->
<pre><code># This is a header</code></pre>
<!--<Code>-->
<!--<Parser>-->
<p> This is a paragraph.
<!--<Text>-->
<!--<Parser>-->
<!--<Parser>-->
</p>
<!--<Paragraph>-->
<!--<Parser>-->
<!--<Parser>-->
<ul>
<li>This is a list
<!--<Text>-->
<!--<Parser>-->
<!--<Parser>-->
<!--<Text>-->
<!--<Parser>-->
<!--<Parser>-->
</li>
<!--<ListItem>-->
<li>With two items
<!--<Text>-->
<!--<Parser>-->
<!--<Parser>-->
<!--<Text>-->
<!--<Parser>-->
<ol start="1">
<li>And a sublist
<!--<Text>-->
<!--<Parser>-->
<!--<Parser>-->
<!--<Text>-->
<!--<Parser>-->
<!--<Parser>-->
</li>
<!--<ListItem>-->
<li>That is ordered
<!--<Text>-->
<!--<Parser>-->
<!--<Parser>-->
<!--<Text>-->
<!--<Parser>-->
<!--<Parser>-->
</li>
<!--<ListItem>-->
</ol>
<!--<List>-->
<!--<Parser>-->
<ul>
<li>With another
<!--<Text>-->
<!--<Parser>-->
<!--<Parser>-->
<!--<Text>-->
<!--<Parser>-->
<!--<Parser>-->
</li>
<!--<ListItem>-->
<li>Sublist inside
<!--<Text>-->
<!--<Parser>-->
<!--<Parser>-->
<!--<Text>-->
<!--<Parser>-->
<!--<Parser>-->
</li>
<!--<ListItem>-->
</ul>
<!--<List>-->
<!--<Parser>-->
<!--<Parser>-->
</li>
<!--<ListItem>-->
</ul>
<!--<List>-->
<!--<Parser>-->
<!--<Parser>-->
<table>
<thead>
<tr>
<th align="center">And this is
<!--<Text>-->
<!--<Parser>-->
<!--<Parser>-->
</th>
<!--<TableCell>-->
<th align="center">A table
<!--<Text>-->
<!--<Parser>-->
<!--<Parser>-->
</th>
<!--<TableCell>-->
</tr>
<!--<TableRow>-->
</thead>
<!--<TableHead>-->
<tbody>
<tr>
<td align="center">With two
<!--<Text>-->
<!--<Parser>-->
<!--<Parser>-->
</td>
<!--<TableCell>-->
<td align="center">columns
<!--<Text>-->
<!--<Parser>-->
<!--<Parser>-->
</td>
<!--<TableCell>-->
</tr>
<!--<TableRow>-->
<tr>
<td align="center">With two
<!--<Text>-->
<!--<Parser>-->
<!--<Parser>-->
</td>
<!--<TableCell>-->
<td align="center">columns
<!--<Text>-->
<!--<Parser>-->
<!--<Parser>-->
</td>
<!--<TableCell>-->
</tr>
<!--<TableRow>-->
</tbody>
<!--<TableBody>-->
</table>
<!--<Table>-->
<!--<Parser>-->
<!--<Parser>-->
<!--<SvelteMarkdown>-->
Sorry about the delay! I'm not sure I understand what the issue is here? SvelteMarkdown doesn't concern itself with styling (although you can add styles when overriding the "renderers", or using :global), and the final render to HTML is handled by Svelte itself, not this package (using <svelte:component>).
Your styles get removed by svelte as "unused". You should see the warning when compiling the project.
As above was said already, use :global