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} />