HTML Renderers

When your markdown source contains raw HTML (which Marked parses as html tokens), @humanspeak/svelte-markdown renders each HTML tag through a dedicated Svelte component. The package ships with renderers for 69+ standard HTML tags.

These HTML renderers are separate from the markdown renderers. They handle HTML elements that appear within markdown content, parsed by HTMLParser2.

Accessing HTML Renderers

The full HTML renderer map is available as a named export:

import { Html, htmlRendererKeys } from '@humanspeak/svelte-markdown'

// Html is an object mapping tag names to Svelte components
console.log(Html.div)    // Div component
console.log(Html.strong) // Strong component

// htmlRendererKeys is an array of all tag names
console.log(htmlRendererKeys) // ['a', 'abbr', 'address', ...]

import { Html, htmlRendererKeys } from '@humanspeak/svelte-markdown'

// Html is an object mapping tag names to Svelte components
console.log(Html.div)    // Div component
console.log(Html.strong) // Strong component

// htmlRendererKeys is an array of all tag names
console.log(htmlRendererKeys) // ['a', 'abbr', 'address', ...]

Overriding HTML Renderers

Override specific HTML tag renderers via the renderers.html prop:

<script>
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    import CustomDiv from './CustomDiv.svelte'

    const source = 'Some markdown with <div>raw HTML</div> inside'
</script>

<SvelteMarkdown
    {source}
    renderers={{
        html: {
            div: CustomDiv
        }
    }}
/>

<script>
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    import CustomDiv from './CustomDiv.svelte'

    const source = 'Some markdown with <div>raw HTML</div> inside'
</script>

<SvelteMarkdown
    {source}
    renderers={{
        html: {
            div: CustomDiv
        }
    }}
/>

Your html overrides are merged with the defaults — only the tags you specify are replaced.

Complete Tag List

Below is the full list of supported HTML tags, organized by category.

Text Content

Headings

Inline Text Semantics

Lists

Table Elements

Sectioning

Media & Embedded Content

Forms & Interactive

UnsupportedHTML Component

The UnsupportedHTML component renders nothing. It is used by the allow/deny filtering system to suppress specific HTML tags:

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

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

When a tag is mapped to UnsupportedHTML, any instances of that tag in the markdown source will produce no output.

Filtering HTML Tags

Use the provided utility functions to control which HTML tags are rendered:

<script>
    import SvelteMarkdown, {
        allowHtmlOnly,
        excludeHtmlOnly,
        buildUnsupportedHTML
    } from '@humanspeak/svelte-markdown'

    // Only allow safe inline tags
    const safeHtml = allowHtmlOnly(['strong', 'em', 'a', 'code'])

    // Block potentially dangerous tags
    const filteredHtml = excludeHtmlOnly(['iframe', 'form', 'input'])

    // Block all HTML
    const noHtml = buildUnsupportedHTML()
</script>

<SvelteMarkdown source={markdown} renderers={{ html: safeHtml }} />

<script>
    import SvelteMarkdown, {
        allowHtmlOnly,
        excludeHtmlOnly,
        buildUnsupportedHTML
    } from '@humanspeak/svelte-markdown'

    // Only allow safe inline tags
    const safeHtml = allowHtmlOnly(['strong', 'em', 'a', 'code'])

    // Block potentially dangerous tags
    const filteredHtml = excludeHtmlOnly(['iframe', 'form', 'input'])

    // Block all HTML
    const noHtml = buildUnsupportedHTML()
</script>

<SvelteMarkdown source={markdown} renderers={{ html: safeHtml }} />

See Allow/Deny for detailed documentation on these filtering functions.

Related

• Markdown Renderers — the 24 built-in markdown renderers
• Custom Renderers — guide to building custom components
• Allow/Deny — HTML and renderer filtering
• Security — security considerations for HTML rendering