import { Markdown } from '@tc/md-react'; import '@tc/md-react/styles.css'; function App() { return ( <Markdown className="markdown-body"> # Hello World This is **Markdown** content. </Markdown> ); }

import { StreamingMarkdown } from '@tc/md-react'; function ChatMessage({ content, isComplete }) { return ( <StreamingMarkdown content={content} isComplete={isComplete} className="markdown-body" /> ); }

<StreamingMarkdown source={fullContent} outputRate="medium" // 'slow' | 'medium' | 'fast' | 'instant' onComplete={() => console.log('Done')} />

<StreamingMarkdown source={content} outputRate={{ charsPerSecond: 100, chunkSize: 5, }} />

<Markdown math> 行内公式：$E = mc^2$ 块级公式： $$ \int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2} $$ </Markdown>

// 流式渲染 <StreamingMarkdown content={content} math />

<Markdown highlight> ```javascript const greeting = 'Hello, World!'; console.log(greeting); ``` </Markdown>

<Markdown mermaid> ```mermaid graph TD A[开始] --> B{条件判断} B -->|是| C[执行操作] B -->|否| D[结束] C --> D ``` </Markdown>

// 流式渲染 <StreamingMarkdown content={content} mermaid />

// React <Markdown components={{ h1: ({ children }) => <h1 className="custom-h1">{children}</h1>, a: ({ href, children }) => ( <a href={href} target="_blank" rel="noopener"> {children} </a> ), code: ({ className, children }) => ( <code className={`${className} custom-code`}>{children}</code> ), }} > # Custom Heading </Markdown>

import remarkMath from 'remark-math'; import rehypeKatex from 'rehype-katex'; import remarkGemoji from 'remark-gemoji'; <Markdown remarkPlugins={[ { plugin: remarkMath }, { plugin: remarkGemoji }, ]} rehypePlugins={[ { plugin: rehypeKatex, options: { strict: false } }, ]} > :rocket: $E = mc^2$ </Markdown>

// React import { useMarkdown, useStreamingMarkdown } from '@tc/md-react'; const html = useMarkdown(content, { gfm: true, highlight: true }); const { blocks, isComplete, stats } = useStreamingMarkdown({ content, onComplete: () => {}, });