<!-- Source: https://markdown.svelte.page/examples/custom-renderers -->

# Custom Renderers

> Compare renderer policies in @humanspeak/svelte-markdown, rendering the same markdown with defaults and an allow-list via allowRenderersOnly.

**Source:** [https://markdown.svelte.page/examples/custom-renderers](https://markdown.svelte.page/examples/custom-renderers)

**Markdown mirror:** [https://markdown.svelte.page/examples/custom-renderers.md](https://markdown.svelte.page/examples/custom-renderers.md)

---

This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.

## FIG-001: default renderers.

No renderer override — every built-in lights up. Headings, paragraphs, lists, code blocks, tables, blockquotes, and horizontal rules all render normally.

**Metadata:** tag: `DEFAULT` | renderers: `all built-ins`

### Notes

- Pass nothing for `renderers` and every built-in lights up — paragraphs, headings, lists, code blocks, tables, blockquotes, rules.
- The right default for content authoring. You get full markdown fidelity with no opt-in needed.

### Source

#### DefaultRenderers.svelte

Source file: [src/lib/examples/custom-renderers/demos/DefaultRenderers.svelte](https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/lib/examples/custom-renderers/demos/DefaultRenderers.svelte)

```svelte
<script lang="ts">
    import SvelteMarkdown from '@humanspeak/svelte-markdown'

    const markdown = `## Custom Renderers Demo

### How It Works

Svelte Markdown lets you **control which renderers are active**. This is useful for:

1. Restricting markdown features in user-generated content
2. Creating simplified markdown views
3. Building *focused* content editors

#### Code Example

Use \`allowRenderersOnly\` to whitelist specific renderers:

\`\`\`js
import { allowRenderersOnly } from '@humanspeak/svelte-markdown'

const renderers = allowRenderersOnly([
    'paragraph', 'heading', 'text',
    'strong', 'em', 'link'
])
\`\`\`

Check out [the documentation](https://markdown.svelte.page) for more details.

---

> Tip: Disabled renderers simply won't render their content, keeping your output clean and predictable.

Here is a table for reference:

| Renderer | Description |
|----------|-------------|
| paragraph | Basic text blocks |
| heading | h1-h6 elements |
| link | Anchor tags |
| codespan | Inline code |
| code | Code blocks |

- Item one
- Item two
- Item three`
</script>

<!--
  Default renderers — no override. Every built-in renderer is active:
  headings, paragraphs, links, code blocks, tables, blockquotes,
  horizontal rules, and lists all paint into the DOM normally.
-->
<div class="prose prose-sm dark:prose-invert mx-auto max-w-4xl px-6 py-6">
    <SvelteMarkdown source={markdown} />
</div>
```

## FIG-002: filtered renderers.

allowRenderersOnly whitelists a tight set of formatting renderers. Code blocks, tables, blockquotes, and horizontal rules drop entirely from the same markdown source.

**Metadata:** tag: `FILTERED` | renderers: `allow-list`

### Notes

- `allowRenderersOnly([...])` turns the renderer map into an allow-list. Anything not in the list silently drops out.
- Use to strip features the source supports but you don't want — e.g. no code blocks in chat bubbles, no tables in mobile previews.

### Source

#### FilteredRenderers.svelte

Source file: [src/lib/examples/custom-renderers/demos/FilteredRenderers.svelte](https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/lib/examples/custom-renderers/demos/FilteredRenderers.svelte)

```svelte
<script lang="ts">
    import SvelteMarkdown, { allowRenderersOnly } from '@humanspeak/svelte-markdown'

    // Whitelist a tight set of renderers — everything else (code blocks,
    // tables, blockquotes, horizontal rules) drops from the output.
    const renderers = allowRenderersOnly([
        'paragraph',
        'heading',
        'text',
        'strong',
        'em',
        'link',
        'list',
        'listitem',
        'codespan'
    ])

    const markdown = `## Custom Renderers Demo

### How It Works

Svelte Markdown lets you **control which renderers are active**. This is useful for:

1. Restricting markdown features in user-generated content
2. Creating simplified markdown views
3. Building *focused* content editors

#### Code Example

Use \`allowRenderersOnly\` to whitelist specific renderers:

\`\`\`js
import { allowRenderersOnly } from '@humanspeak/svelte-markdown'

const renderers = allowRenderersOnly([
    'paragraph', 'heading', 'text',
    'strong', 'em', 'link'
])
\`\`\`

Check out [the documentation](https://markdown.svelte.page) for more details.

---

> Tip: Disabled renderers simply won't render their content, keeping your output clean and predictable.

Here is a table for reference:

| Renderer | Description |
|----------|-------------|
| paragraph | Basic text blocks |
| heading | h1-h6 elements |
| link | Anchor tags |
| codespan | Inline code |
| code | Code blocks |

- Item one
- Item two
- Item three`
</script>

<div class="prose prose-sm dark:prose-invert mx-auto max-w-4xl px-6 py-6">
    <SvelteMarkdown source={markdown} {renderers} />
</div>
```
