name: x-markdown version: 2.9.0 description: Use when building or reviewing Markdown rendering with @ant-design/x-markdown, including streaming Markdown, custom component mapping, plugins, themes, and chat-oriented rich content.

🎯 Skill Positioning

This skill focuses on one job: render Markdown correctly and predictably with @ant-design/x-markdown.

It covers:

• Basic rendering and package boundaries
• LLM streaming output and incomplete syntax handling
• Custom component mapping for rich chat or data-display blocks
• Plugins, themes, and safe rendering defaults

Table of Contents

• 📦 Package Boundaries
• 🚀 Quick Start Decision Guide
• 🛠 Recommended Workflow
• 🚨 Development Rules
• 🤝 Skill Collaboration
• 🔗 Reference Resources

📦 Package Boundaries

⚠️ x-markdown is not a chat-state tool. Use it to render content after @ant-design/x and @ant-design/x-sdk have already produced the message data.

🚀 Quick Start Decision Guide

🛠 Recommended Workflow

1. Start with CORE.md and get a plain render working first.
2. Add STREAMING.md only when the content arrives chunk-by-chunk.
3. Add EXTENSIONS.md when you need custom tags, plugins, syntax blocks, or themes.
4. Use API.md to confirm prop names and defaults instead of guessing.

Minimal Setup Reminder

import { XMarkdown } from '@ant-design/x-markdown';
export default () => <XMarkdown content="# Hello" />;

🚨 Development Rules

• Prefer a stable components object. Do not create new inline component mappings on every render.
• Use streaming.hasNextChunk = false on the final chunk, otherwise incomplete placeholders will not flush into final content.
• Treat raw HTML carefully. Prefer escapeRawHtml when raw HTML should stay visible as text.
• If raw HTML must be rendered, keep dompurifyConfig explicit and minimal.
• Keep theme overrides small. Start from x-markdown-light or x-markdown-dark and override only the variables you need.
• If a custom component depends on complete syntax, branch on streamStatus === 'done'.

🤝 Skill Collaboration

Boundary Rules

• Use `x-chat-provider` when adapting an API shape.
• Use `x-request` when configuring transport, auth, retries, or streaming separators.
• Use `use-x-chat` when managing chat state in React.
• Use `x-markdown` when the content itself needs Markdown parsing, streaming recovery, or rich component rendering.

🔗 Reference Resources

• CORE.md - Package boundaries, install/setup, safe defaults, common render patterns
• STREAMING.md - Chunked rendering, incomplete syntax recovery, loading vs done behavior
• EXTENSIONS.md - Components, plugins, themes, custom tag guidance
• API.md - Generated API reference from the official x-markdown docs

Official Docs

• XMarkdown Introduction
• XMarkdown Examples
• XMarkdown Streaming
• XMarkdown Components
• XMarkdown Plugins
• XMarkdown Themes