使用场景 ​

Markdown 是一种文档标记语言，可以通过简单的标记实现例如标题，图片，表格，链接，加粗等基本常用富文本功能。 MDX 是在 Markdown 基础上，允许引入 JSX 实现更加复杂定制化的文档撰写与展示需求。

Semi 提供的 MarkdownRender 组件支持渲染 Markdown 和 MDX，无需特别配置，传入纯文本即可渲染出符合 Semi 样式规范的富文本内容。

通常用于下列场景：

  • 文档站编写与渲染
  • 服务端动态生成富文本内容时，前端渲染
  • 偏内容展示的轻交互网站

代码演示 ​

如何引入 ​

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

jsx
import { MarkdownRender } from '@kousum/semi-ui-vue';

基本用法 ​

导入 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-
remarkPlugins自定义 Remark PluginRemark Plugin Array-
rehypePlugins自定义 Rehype PluginRehype Plugin Array-
style样式CSSProperties-

设计变量 ​