用途:在 React 应用中把 Markdown 渲染为 React 元素,避免使用 dangerouslySetInnerHTML,输出内容本身是 React 元素,默认更安全。渲染流程为 Markdown → remark(AST)→ rehype(HTML AST)→ React 组件。
主要能力:支持 remark 插件转换 Markdown AST、rehype 插件转换 HTML AST;可用 components 属性覆盖任意 HTML 元素的渲染,实现自定义样式、链接或交互元素;通过 remark-gfm 支持表格、删除线、自动链接与任务列表;通过 rehype-highlight 或 rehype-pretty-code 实现代码高亮。
必要用法:基础包只渲染标准 Markdown,多数场景需搭配 remark-gfm 与 rehype-highlight,安装命令为 bun add react-markdown remark-gfm rehype-highlight,并引入高亮主题 CSS(如 import 'highlight.js/styles/github-dark.css')。组件用法为 <Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeHighlight]}>{markdownContent}</Markdown>,其中 children 必须是字符串,传入 JSX 或 React 元素无效。自定义组件通过 components 属性覆盖 code、a、img 等元素。
注意事项与限制:资料强调训练数据中的 API 可能过时,写代码前应先获取当前 README 与插件文档核对属性名和插件选项,不要凭记忆假设。未启用 remark-gfm 时表格、删除线、自动链接和任务列表会静默按纯文本渲染,这是常见问题来源。插件顺序有影响,remark 插件按数组顺序处理 Markdown AST,随后 rehype 插件处理 HTML AST。区分行内代码与代码块需检查 className 是否存在。每次 children 字符串变化都会重新解析并渲染整棵 Markdown 树,流式逐字更新场景可能有性能开销,可考虑防抖或 React.memo。收费、价格、适用平台等信息资料暂未提供。