recommanded way to purify html

[Ennoriel]

Hi! The library looks amazing!

I am using this library for rendering markdown written by users. In this use case, I would like to purify the HTML generated. What do you consider the best solution?

From what I read, svelte-markdown uses marked internally who recommands DOMPurify. Is there a way to use it as a middleware?

Should this information be written in the readme?

Thanks :)

[Ennoriel]

I found a way: override the Html component to not use @html.

[MihinMUD]

@Ennoriel Hey, Can you tell me exactly how you did it? I am also looking for a solution to prevent users from using html tags.

[Ennoriel]

Hi @MihinMUD

You can override the renderer components:

<script lang="ts">
	import Code from '$lib/components/atom/MarkdownCode.svelte';
	import Text from '$lib/components/atom/MarkdownText.svelte';
	import SvelteMarkdown from 'svelte-markdown';

	export let source: string;
</script>

<SvelteMarkdown {source} renderers={{ html: Text, code: Code }} />

<!-- MarkdownText.svelte -->
<script lang="ts">
	export let text: string;
</script>

{text}

<!-- MarkdownCode.svelte -->
<script lang="ts">
	import Prism from 'prismjs';
	import 'prism-svelte';

	export let lang: string;
	export let text: string;

	$: highlighted = Prism.highlight(text, Prism.languages.svelte, 'svelte');
</script>

<pre class="language-{lang}"><code>{@html highlighted}</code></pre>