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,...
공식 문서 열기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.