HTML and inline styles

When Markdown contains an HTML card or other markup, decide whether it should become elements. By default it remains visible source text. Enable html when you need sanitized HTML presentation.

Enable and restrict HTML

With html: true, complete HTML islands pass through an HTML parser and fixed allowlist sanitizer before becoming Vue nodes. Block and inline HTML are supported; inline HTML can contain Markdown, while code stays literal. Event attributes, scripts, dangerous URLs, iframe, <style> tags and arbitrary template expressions cannot be enabled.

<QuireMarkdown :content="text" :html="{
  allowedElements: ['div', 'span', 'strong', 'a'],
  allowLink: url => url.startsWith('https://example.com/'),
  allowImage: () => false
}" />

The configuration above permits only four listed tags, restricts HTML links to one site and disallows HTML images. Setting html: true without these restrictions uses the built-in allowlist.

These options only further restrict sanitized tags and HTML URLs; they do not change ordinary Markdown link policy. HTML ids and fragment links are namespaced per reader. Document HTML cannot register Vue components; use the component map or reading contributions instead. Incomplete HTML, islands above 65,536 UTF-16 units, element depth above 32, or the parser node budget retain source. HTML blocks do not reinterpret Markdown inside them. Block elements in a paragraph and HTML anchors inside Markdown links retain source too, preventing browser rearrangement from causing SSR hydration mismatches.

Cards, layouts and inline styles

html: true strips style attributes by default. Explicitly use html: { styles: 'safe' } for HTML cards with backgrounds, borders and spacing. This example uses wrapping Flex cards, a table, nested native disclosures, an HTML fragment link and late Markdown references. Toggle styles for comparison or replay the same source as a stream.

<QuireMarkdown :content="text" :html="{ styles: 'safe' }" />

The fixed subset includes solid background/text colors, borders, nonnegative spacing and sizes, basic typography, Flex and Grid. Colors accept hexadecimal values and basic names; Grid columns can use 1fr 2fr, but not functions such as repeat(). Lengths are bounded to 2048px, 128em/rem or 100%, with separate font-size limits. Each style attribute permits at most 4096 UTF-16 units and 64 declarations. Invalid declarations are dropped individually; exceeding a budget drops the entire style attribute.

URLs, CSS functions, variables, escapes, comments, !important, positioning, z-index, animations, opacity, display: none and external stylesheets are not accepted. Source classes still follow the fixed HTML sanitizer. The same rules run on the server and client; style policy changes invalidate cached blocks. Incomplete HTML stays visible as source until its closing tag arrives. Use host-provided components for richer presentation.