@pt/react-common组件使用
MarkdownCompiler
强大的 Markdown 渲染组件,支持代码高亮、复制、预览及引用标记。
MarkdownCompiler 是一个基于 react-markdown 封装的组件,集成了 GFM、代码块高亮、代码工具栏(复制/下载)以及自定义引用标记渲染等功能。
基本用法
import { MarkdownCompiler } from "@pt/react-common/components";
const content = "# Hello World\n这是一段 **Markdown** 内容,支持 [链接](https://google.com) 和列表:\n- 项目 1\n- 项目 2";
<MarkdownCompiler markdown={content} />核心特性
- Markdown 渲染:支持 GitHub Flavored Markdown (GFM)。
- 代码高亮:内置
rehype-highlight,支持多种编程语言。 - 工具栏:代码块右上角自动添加复制和下载按钮。
- 引用标记 (Citations):支持解析特殊的引用格式并渲染为带弹出层的标记。
属性说明 (Props)
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
markdown | string | - | 需要渲染的 Markdown 文本内容 |
className | string | - | 容器的自定义类名 |
onRendered | () => void | - | 渲染完成后的回调函数 |
onError | (err: Error) => void | - | 渲染出错时的回调函数 |
before | ReactNode | - | 渲染内容之前的插槽 |
after | ReactNode | - | 渲染内容之后的插槽 |
互动演练场
试试直接编辑下方代码,预览区会实时更新:
加载编辑器中…
