build69
build69  /  Components  /  Media & Files  /  Markdown

Markdown

v1.0.13Updated 20 Oct 2026

Themed markdown renderer with GFM tables, KaTeX math, lazy Mermaid (securityLevel:strict), remote-rendered PlantUML SVG, syntax-highlighted code, and task lists. Output is sanitised via DOMPurify.

View source← Back to catalog

Preview

Live · 13 stories
BasicOpen ↗
▸Why this is recommendedmarkdownhtmlcontentgfm+7

Markdown — basic.

Recommended for+14
  • ✓Help / docs surfaces
  • ✓Comment / note rendering
  • ✓AI / agent streaming response rendering
  • ✓Wiki pages
Tags+6
markdownhtmlcontentgfmkatexmathmermaidplantumlsyntax-highlightsanitizedbasic
Features+4
  • GFM tables + strikethrough + task lists
  • KaTeX inline + block math
  • Mermaid diagrams (lazy-loaded, securityLevel:strict)
  • PlantUML diagrams (remote SVG)
  • Syntax-highlighted code blocks (with copy button)
  • Task lists with checkboxes
  • Sanitised via DOMPurify (XSS-safe)
  • Optional line numbers in code blocks
  • format="html": sanitised raw-HTML rendering with themed typography
  • i18n labels prop (MarkdownLabels — every built-in string overridable)
  • Pass-through props (data-* and the rest) land on the root of EVERY branch — the markdown document, the html document, the loading skeleton and the empty placeholder — so an id an e2e or audit tool reads never disappears while the component is busy or has nothing to show. They are spread first, so they cannot overwrite the wiring the component sets itself (data-slot, the state roles, className, style, ref)
Not recommended for−2
  • ✕Plain unstyled text (use Typography)
  • ✕Form labels (use Label)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Markdown" })

Usage

import { Markdown } from '@/components/media/markdown';

<Markdown>{`# Title\n\n\`\`\`mermaid\ngraph TD; A-->B;\n\`\`\``}</Markdown>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
source

Markdown source (or an HTML body when format="html")

stringyes
format

Input format — html renders DOMPurify-sanitised markup with themed typography (default markdown)

'markdown' | 'html'—
lineNumbers

Show line numbers in code blocks

boolean—
mermaid

Render mermaid code blocks (default true)

boolean—
plantuml

Render plantuml code blocks via the configured server (default true)

boolean—
labels

Override built-in UI strings (copy button + toasts, diagram loading/error fallbacks, heading anchor aria) for i18n

Partial<MarkdownLabels>—
...props

Every remaining standard div attribute (data-* hooks, id, style, title, aria-*, ref, handlers) is spread onto the root of whichever branch renders — document, html, loading and empty. The spread goes FIRST, so data-slot and the loading status role can never be clobbered. A caller-supplied emptyState node is still rendered verbatim, with no wrapper of our own (fb_5c6ffd6a)

React.ComponentProps<'div'>—

Related

Platform docsAll componentsSource files