Skip to main content

Markdown

EMarkdown renders Markdown to email-safe HTML with inline styles and per-element overrides.

EMarkdown renders Markdown to email-safe HTML with inline styles. It is useful when content is authored as Markdown (for example from a CMS field) rather than as Vue markup.

Raw HTML is rejected, including HTML comments. Links and images accept relative URLs plus http, https, mailto, tel, and cid; other schemes are rejected after HTML-entity and control-character normalization. HTML-looking text inside code spans and fences is escaped. This keeps Markdown from becoming an implicit raw-HTML escape hatch.

PropContract
sourceOptional Markdown string. When it is a string it wins; otherwise the text-only default slot is used.
markdownCustomStylesOptional per-element style overrides merged over the defaults (for example { h1: { color: 'red' } }).

The rendered container accepts Vue's normal class, style, and safe HTML attributes. Use ordinary string, object, or array style values; include CSS units explicitly for dimensional values such as padding.

The default slot must contain text only; an element child throws a TypeError rather than being silently stringified. Links render with target="_blank", and tables render with role="presentation".

vue
<EMarkdown source="# Title\n\nA paragraph with a [link](https://example.com)." />

With overrides:

vue
<EMarkdown
  :source="body"
  :markdown-custom-styles="{ h1: { color: '#0f172a' }, a: { color: '#2563eb' } }"
  :style="{ padding: '0 24px' }"
/>
Divergence: no data-id marker
Unlike React Email, the container omits the data-id="react-email-markdown" marker (the same no-data-id divergence as EColumn). No Vue behavior consumes the marker. See the conformance report.