logoWebkit RSC
@pt/react-common组件使用

MarkdownCompiler

强大的 Markdown 渲染组件,支持代码高亮、复制、预览及引用标记。

MarkdownCompiler 是一个基于 react-markdown 封装的组件,集成了 GFM、代码块高亮、代码工具栏(复制/下载)以及自定义引用标记渲染等功能。

基本用法

Hello World

这是一段 Markdown 内容,支持 链接 和列表:

  • 项目 1
  • 项目 2
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)

属性类型默认值说明
markdownstring-需要渲染的 Markdown 文本内容
classNamestring-容器的自定义类名
onRendered() => void-渲染完成后的回调函数
onError(err: Error) => void-渲染出错时的回调函数
beforeReactNode-渲染内容之前的插槽
afterReactNode-渲染内容之后的插槽

互动演练场

试试直接编辑下方代码,预览区会实时更新:

加载编辑器中…

On this page