Note

This documentation describes the MarkdownViewer Vue component for native UI views for Xml templates see markdown-viewer.

MarkdownViewer

Parses and renders Markdown content as HTML with optional syntax highlighting (Shiki), Mermaid diagram rendering, and copy-code buttons.

Import

import { MarkdownViewer } from '@neos/design-system'

Props

Prop	Type	Default	Description
source	string \| null \| undefined	undefined	Markdown string to render
sanitize	boolean	false	Sanitize the HTML output after parsing
highlightCode	boolean	false	Enable Shiki syntax highlighting for code blocks
copyCodeButton	boolean	false	Add a copy button to each code block
mermaid	boolean	false	Render Mermaid diagram blocks
loading	boolean	false	When true, defers post-processing until set to false

Notes

• The component sets a data-ready attribute on the container after all post-processing is complete. Useful for snapshot testing.
• When loading is true, the component waits before running Shiki/Mermaid post-processing.

Usage Examples

Simple markdown display

<MarkdownViewer :source="viewModel.current.description" />

Technical documentation with code highlighting

<MarkdownViewer :source="apiDocs" :highlight-code="true" :copy-code-button="true" />

Architecture diagram with Mermaid

<MarkdownViewer :source="diagramMarkdown" :mermaid="true" />

AI-generated content with deferred rendering

<MarkdownViewer :source="aiResponse" :highlight-code="true" :loading="isStreaming" />