logo svelte /markdown v1.6.0
FIG-001/ DEFAULT

default renderers.

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

  • 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.
↩ all examples
renderers · all built-ins mode · live running source

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:

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

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

Check out the documentation for more details.

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

Here is a table for reference:

RendererDescription
paragraphBasic text blocks
headingh1-h6 elements
linkAnchor tags
codespanInline code
codeCode blocks
  • Item one
  • Item two
  • Item three
category · default
sheet · sheet 01 / 02
⟳ to re-run
FIG-002/ FILTERED

filtered renderers.

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

  • 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.
↩ all examples
renderers · allow-list mode · live running source

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 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
category · filtered
sheet · sheet 02 / 02
⟳ to re-run

Custom Renderers