Plus 组件 · Markdown
渲染器
在网页中即时渲染 Markdown 和 MDX

使用场景

Markdown 是一种文档标记语言，可以通过简单的标记实现例如标题，图片，表格，链接，加粗等基本常用富文本功能。 MDX 是在 Markdown 基础上，允许引入 JSX 实现更加复杂定制化的文档撰写与展示需求。
Semi 提供的 MarkdownRender 组件支持渲染 Markdown 和 MDX，无需特别配置，传入纯文本即可渲染出符合 Semi 样式规范的富文本内容。
通常用于下列场景：
  • 文档站编写与渲染
  • 服务端动态生成富文本内容时，前端渲染
  • 偏内容展示的轻交互网站
注意：Safari 16.3 之前的版本不支持正则环视断言，会导致上游依赖 mdxjs 报错，可以传入 remarkGfm 为 false 关闭 gfm 语法解析（会导致table 等markdown 特性无法解析），并且在项目编译时使用 null-loader 或 alias 其他方式忽略掉 remark-gfm 这个包。

代码演示

如何引入

MarkdownRender 从 v2.62.0 开始支持
注意：MarkdownRender 组件 依赖 jsx/run-time，搭配使用 React 版本需 > 16.14.0

基本用法

导入 MarkdownRender 后，直接传入 Markdown 或 MDX 纯文本即可。
注意因为 < { 等符号是合法的 JSX 符号会被判定为代码，无法直接渲染，需要使用 \ 转义，如果你只需要渲染纯 Markdown，参考下方仅渲染 Markdown 一节。

修改元素样式

你可以任意替换 Markdown 或 MDX 文档中的文档元素的显示效果，只需向 components props 中传入你的渲染组件覆盖即可
比如，现在需要将所有1号标题的颜色设置成主色
可以覆盖的基本元素 tag 支持 a blockquote br code em h1 h2 h3 h4 h5 hr img li ol p pre strong ul table

仅纯 Markdown

当你渲染的 Markdown 仅仅是纯 markdown，不包含任何 JSX 代码时，可传入 format="md" 来开启仅 Markdown 模式，在这种模式下无需转义特殊字符

添加自定义组件

通过传入自定义组件到 components Props，能够实现在 Markdown 中直接书写 JSX，组件会被渲染到最终页面上，支持 JS 事件。 默认的 Markdown 组件可从 MarkdownRender.defaultComponents 中获取，可以用于二次封装。
注意事项
注意尽量确保被渲染的 Markdown 内 JSX 代码可信，防止 XSS。

添加插件

通过 remarkPlugins rehypePlugins 支持 MDXJS 的所有 RemarkPlugin 和 RehypePlugins 插件，详情请参考 MDXJS

API

属性说明类型默认值
className类名string-
components用于覆盖 Markdown 元素，也可添加自定义组件Record<string, JSXElementConstructor>-
format传入的 raw 类型，是否是纯 Markdown'md'|'mdx''mdx'
rawMarkdown 或 MDX 的纯文本string-
remarkGfm是否开启 Github GFM 语法，safari 16.3 之前不支持环视断言会报错booltrue
remarkPlugins自定义 Remark PluginRemark Plugin Array-
rehypePlugins自定义 Rehype PluginRehype Plugin Array-
style样式CSSProperties-

设计变量