search

pablo-abc / svelte-markdown

Markdown parser to svelte components
MIT License
360 stars 50 forks source link

HTML Output Missing Styles #47

Open JuliaBonita opened 2 years ago

JuliaBonita commented 2 years ago

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. Screenshot 2022-04-25 203718

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>-->
pablo-abc commented 2 years ago

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>).

ZerdoX-x commented 2 years ago

Your styles get removed by svelte as "unused". You should see the warning when compiling the project.

As above was said already, use :global