Good day,
I am trying to create a markdown previewer using Svelte. I'm using the following libraries for different tasks:
- Marked library for parsing markdown,
- Highlight.js for highlighting code blocks,
- Sanitize-html for sanitizing the generated HTML to prevent XSS attacks.
However, I'm facing an issue where the custom CSS classes I apply to the generated HTML are not being applied. Here is the code I'm using:
<script lang="ts"> import sanitizeHtml from 'sanitize-html'; import { marked } from 'marked'; import hljs from 'highlight.js'; import { afterUpdate } from 'svelte'; import 'highlight.js/styles/atom-one-dark.css'; let markdown = `# Hello World`; $: html = sanitizeHtml(marked(markdown)); afterUpdate(() => hljs.highlightAll()); let edit = true;</script><div class="container"><div class="editor"> {#if edit}<textarea spellcheck="false" bind:value={markdown} /> {:else}<div class="viewer"> {@html html}</div> {/if}</div><div><input type="checkbox" bind:checked={edit} /></div></div><style>.viewer h1 { font-size: 24px; color: #ff0000;}</style>The generated h1 element is not styled
I thought it might be because of the dependencies conflicts so I tried removing every dependencies but still no class is applied.