Markdown Viewer
Renders markdown content — headings, lists, tables, blockquotes, links, and fenced code — as styled, themed HTML.
Release notes
Zyra UI now ships 60 accessible components, with first-class theming.
- Copy-paste friendly
- Token-driven, re-themeable
- Built for Angular signals
const greeting = 'hello world';
Read the full changelog for details.
API
All inputs and configuration options for zyra-markdown-viewer.
| Prop | Type | Default | Description |
|---|---|---|---|
content | string | '' | The markdown source to render |
sanitize | boolean | true | Strips raw HTML-looking tags out of the source instead of showing them literally |
linkTarget | '_blank' | '_self' | '_blank' | Target for generated links; _blank also adds rel="noopener noreferrer" |
Tokens
CSS custom properties zyra-markdown-viewer reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Text--zyra-color-markdown-viewer-text | var(--zyra-color-foreground) | Body text color. |
Heading--zyra-color-markdown-viewer-heading | var(--zyra-color-foreground) | Color of h1–h6 elements. |
Link--zyra-color-markdown-viewer-link | var(--zyra-color-primary) | Color of rendered links. |
Blockquote border--zyra-color-markdown-viewer-blockquote-border | var(--zyra-color-primary-border) | Left border color of blockquotes. |
Inline code background--zyra-color-markdown-viewer-inline-code-bg | var(--zyra-color-surface-inset) | Background of inline `code` spans (fenced blocks use Code Block’s own tokens). |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Headings render as real h1–h6 elements, preserving document outline/landmark navigation
- Links opened in a new tab (_blank) automatically get rel="noopener noreferrer"
- Never uses innerHTML — markdown is parsed into a typed block/inline structure and rendered through normal Angular bindings, so it cannot execute embedded scripts