Code Examples
Code Examples
Ant Design XUsed for rendering streaming Markdown format returned by LLMs.
| Property | Description | Type | Default |
|---|---|---|---|
| content | Markdown content to be rendered | string | - |
| children | Markdown content, alias for content property | 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. Prevents validation errors when custom components contain block-level elements | keyof JSX.IntrinsicElements | 'p' |
| streaming | Configuration for streaming rendering behavior | SteamingOption, see details | - |
| config | Marked.js configuration for Markdown parsing and extensions | MarkedExtension | { gfm: true } |
| openLinksInNewTab | Whether to add target="_blank" to all anchor tags | boolean | false |
| dompurifyConfig | DOMPurify configuration for HTML sanitization and XSS protection | DOMPurify.Config | - |
| className | Additional CSS class name for the root container | string | - |
| rootClassName | Alias for className, additional CSS class for the root element | string | - |
| style | Inline styles for the root container | CSSProperties | - |
| Property | Description | Type | Default |
|---|---|---|---|
| hasNextChunk | Indicates whether more content chunks are expected. When false, flushes all cached content and completes rendering | boolean | false |
| enableAnimation | Enables text fade-in animation for block elements (p, li, h1, h2, h3, h4) | boolean | false |
| animationConfig | Configuration for text appearance animation effects | AnimationConfig | { fadeDuration: 200, easing: 'ease-in-out' } |
| incompletePlaceholderMap | Placeholder mapping for unclosed Markdown elements, supports custom placeholder components for links and images | { link?: string; image?: string } | { link: 'incomplete-link', image: 'incomplete-image' } |
| Property | Description | Type | Default |
|---|---|---|---|
| fadeDuration | Duration of the fade-in animation in milliseconds | number | 200 |
| easing | Easing function for the animation | string | 'ease-in-out' |
| Property | Description | Type | Default |
|---|---|---|---|
| domNode | Component Element from html-react-parser, contains the parsed DOM node information | DOMNode | - |
| streamStatus | Streaming status, loading indicates streaming in progress, done indicates streaming complete | 'loading' | 'done' | - |
| rest | Component properties, supports all standard HTML attributes (e.g. href, title, className, etc.) and custom data attributes | Record<string, any> | - |
The extensions in the config property are used to extend the functionality of the Markdown parser, acting during the Markdown to HTML conversion process:
[^1] footnote syntax to <footnote>1</footnote> HTML tags// 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 }}/>
Basic Markdown syntax rendering.
Streaming conversation with Bubble.
Custom component rendering tags.
Rendering with plugins.
Open links in new tab.
