build69
Sign inGet API key
build69  /  Components  /  Media & Files  /  Markdown

Markdown

v1.0.7Updated 20 Jul 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)
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>—

Related

Platform docsAll componentsSource files