Code Examples
Code Examples
Ant Design XUsed for rendering streaming Markdown format returned by LLM.
| Property | Description | Type | Default |
|---|---|---|---|
| content | Markdown content to render | string | - |
| children | Markdown content, alias for content prop | string | - |
| components | Custom React components to replace HTML elements | Record<string, React.ComponentType<ComponentProps> | keyof JSX.IntrinsicElements>, see details | - |
| paragraphTag | Custom HTML tag for paragraph elements to prevent validation errors when custom components contain block-level elements | keyof JSX.IntrinsicElements | 'p' |
| streaming | Configuration for streaming rendering behavior | StreamingOption, see syntax processing and animation effects | - |
| config | Marked.js configuration for Markdown parsing and extensions | MarkedExtension | { gfm: true } |
| openLinksInNewTab | Whether to add target="_blank" to all a tags | boolean | false |
| dompurifyConfig | DOMPurify configuration for HTML sanitization and XSS protection | DOMPurify.Config | - |
| className | Additional CSS class for root container | string | - |
| rootClassName | Alias for className, additional CSS class for root element | string | - |
| style | Inline styles for root container | CSSProperties | - |
| Property | Description | Type | Default |
|---|---|---|---|
| hasNextChunk | Indicates whether there are subsequent content chunks. When false, flushes all caches and completes rendering | boolean | false |
| enableAnimation | Enables text fade-in animation for block-level elements (p, li, h1, h2, h3, h4) | boolean | false |
| animationConfig | Configuration for text appearance animation effects | AnimationConfig | { fadeDuration: 200, opacity: 0.2 } |
| incompleteMarkdownComponentMap | Custom component names for incomplete syntax. When streaming output contains unclosed Markdown syntax (e.g., incomplete tables, unterminated code blocks), you can manually specify the component name to wrap the fragment for placeholder or loading states. | { link?: string; image?: string; table?: string; html?: string } | {} |
| Property | Description | Type | Default |
|---|---|---|---|
| fadeDuration | Duration of fade-in animation in milliseconds | number | 200 |
| opacity | Initial opacity value for characters during animation (0-1) | number | 0.2 |
| Property | Description | Type | Default |
|---|---|---|---|
| domNode | Component DOM node from html-react-parser, containing parsed DOM node information | DOMNode | - |
| streamStatus | Streaming rendering supports two states: loading indicates content is being loaded, done indicates loading is complete. Currently only supports HTML format and fenced code blocks. Since indented code blocks have no explicit terminator, they always return done status | 'loading' | 'done' | - |
| rest | Component props, supports all standard HTML attributes (e.g., href, title, className) and custom data attributes | Record<string, any> | - |
The extensions in the config property are used to extend the functionality of the Markdown parser, they take effect during the Markdown to HTML conversion process:
[^1] footnote syntax to <footnote>1</footnote> HTML tag// Plugin example: footnote extensionconst footnoteExtension = {name: 'footnote',level: 'inline',start(src) { return src.match(/\[\^/)?.index; },tokenizer(src) {const rule = /^\[\^([^\]]+)\]/;const match = rule.exec(src);if (match) {return {type: 'footnote',raw: match[0],text: match[1]};}},renderer(token) {return `<footnote>${token.text}</footnote>`;}};// Using the plugin<XMarkdowncontent="This is a footnote example[^1]"config={{ extensions: [footnoteExtension] }}/>
The components property is used to replace generated HTML tags with custom React components:
<footnote>1</footnote> with <CustomFootnote>1</CustomFootnote>// Custom footnote componentconst CustomFootnote = ({ children, ...props }) => (<supclassName="footnote-ref"onClick={() => console.log('Clicked footnote:', children)}style={{ color: 'blue', cursor: 'pointer' }}>{children}</sup>);// Using component replacement<XMarkdowncontent="<footnote>1</footnote>"components={{ footnote: CustomFootnote }}/>
When hasNextChunk is true, all incomplete syntax tokens are automatically converted to incomplete-token form, and the incomplete syntax is returned via the data-raw property. The supported token type is StreamCacheTokenType. For example:
[example](https://example.com will be converted to <incomplete-link data-raw="[example](https://example.com">![product](https://cdn.example.com/images/produc will be converted to <incomplete-image data-raw="![product](https://cdn.example.com/images/produc">### will be converted to <incomplete-heading data-raw="###">StreamCacheTokenType is an enumeration type that defines all Markdown syntax token types supported during streaming processing:
type StreamCacheTokenType =| 'text' // Plain text| 'link' // Link syntax [text](url)| 'image' // Image syntax | 'heading' // Heading syntax # ## ###| 'emphasis' // Emphasis syntax *italic* **bold**| 'list' // List syntax - + *| 'table' // Table syntax | header | content || 'xml'; // XML/HTML tags <tag>
Basic markdown syntax rendering.
Incomplete syntax handling and animation effects
Rendering with plugins.
Custom component rendering tags.
Render custom markers [^1].
Use tokenizer make % as heading rendering.
Use walkTokens to check link validity and modify tokens.
Use renderer to perform pre-rendering effect processing and render HTML as text, while adding 🚀 before each heading.
Link processing for English and Chinese content. Supports internationalized display with both English and Chinese text content, demonstrating markdown link parsing and rendering capabilities.
Open links in new tab.
