전체 카탈로그
ContentMarkdown16 props

Markdown

Renders a markdown string as Astryx-styled components. Use Markdown for user-generated content, AI responses, and documentation; it handles headings, lists, tables, code blocks,...

공식 문서 열기
live previewContent

Preview

Preview notes

  • Uses installed Astryx components
  • Keeps the sample compact
  • Verifies every detail page

Import

import {Markdown} from '@astryxdesign/core/Markdown';

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

Renders a markdown string as Astryx-styled components. Use Markdown for user-generated content, AI responses, and documentation; it handles headings, lists, tables, code blocks,...

markdownrich textproserendererstreamingmarkupformatted textmd

Important props

displayblock | inlineoptional
densitydefault | compactoptional
headingLevelStart1 | 2 | 3 | 4 | 5 | 6optional
onLinkClick(href: string, event: MouseEvent) => void | falseoptional

Theming targets

astryx-markdown

Best practices

  • DoSet headingLevelStart to match the page hierarchy, e.g. start at 3 if the markdown sits inside an h2 section.
  • DoUse contentWidth to keep prose at a readable line length in wide layouts.
  • DoUse inlinePlugins for custom shorthand patterns like issue refs, diff refs, and mentions instead of preprocessing the markdown string.
  • Do notUse Markdown for hand-authored layouts; use Text and Heading directly when you control the content.