svelte-exmarkdown

Skip rendering the element

If you want to skip rendering the element, you can use renderer prop.

You can use null to skip rendering the element.

<script lang="ts">
	import type { Plugin } from 'svelte-exmarkdown';
	import Markdown from 'svelte-exmarkdown';

	let md = $state('# Skipped\n\n## Rendered');
	const plugins: Plugin[] = [{ renderer: { h1: null } }];
</script>

<textarea bind:value={md}></textarea>
<Markdown {md} {plugins} />

Allowlist and Denylist

You can use allowlist and denylist to control which elements are allowed to render.

This example is same as above.

<script lang="ts">
	import type { Plugin } from 'svelte-exmarkdown';
	import Markdown, { denylist } from 'svelte-exmarkdown';

	let md = $state('# Skipped\n\n## Rendered');
	const plugins: Plugin[] = [denylist(['h1'])];
</script>

<textarea bind:value={md}></textarea>
<Markdown {md} {plugins} />

If you want to support only some elements, you can use allowlist.

<script lang="ts">
	import type { Plugin } from 'svelte-exmarkdown';
	import Markdown, { allowlist } from 'svelte-exmarkdown';

	let md = $state(
		'# Skipped\n\nOnly paragraph, *em*, **strong** and [link](https://example.com) are rendered'
	);
	const plugins: Plugin[] = [allowlist(['p', 'em', 'strong', 'a'])];
</script>

<textarea bind:value={md}></textarea>
<Markdown {md} {plugins} />