使用场景

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

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

通常用于下列场景：

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

代码演示

如何引入

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

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

基本用法

导入 MarkdownRender 后，直接传入 Markdown 或 MDX 纯文本即可。

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

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

60

 

1

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

2

​

3

​

4

function Demo(){

5

    return <MarkdownRender raw={`

6

## 

7

​

8

正文内容是普通的文本，也可以**加粗**~~删除线~~和<u>下划线</u> [超链接](https://semi.design) 等 Markdown 与 HTML 的基本语法所支持的富文本，也支持 emoji 🍰

9

​

10

​

11

部分符号需要转义 \\{\\} \\<\\> ...

12

​

13

<br/>

14

<br/>

15

---

16

#### Semi Design DSM

17

[Semi DSM](https://semi.design/dsm) 是 Semi Design 提供的设计系统管理工具（Design System Management），支持全局、组件级别的样式定制，并在 Figma 和前端代码之间保持同步  

18

适用于各种规模的团队，无论你是需要简化工作流程，提高团队协作，还是增加生产力，我们都有适合你的功能

19

​

20

##### 中大型企业

21

- 多达 3000+ Design Token，深入每一处细节的定制可能，色彩，阴影，边距，圆角，动效，渲染结构均可自由定制，告别 ~~CSS 硬编码~~

22

- 功能强大，经过抖音内部数千项目验证过的 UI lib，轻松应对各类复杂场景

23

- A11y 无障碍友好，国际化功能完备

24

- 面向社区建设，完全开源，无使用限制

25

- 从 designOps 到 devOps，自动化工作流，Figma UI Kit 一键刷入主题，生成 Style Guideline，研发一行 npm 代码配置接入

26

​

Show Error

Auto Save

修改元素样式

你可以任意替换 Markdown 或 MDX 文档中的文档元素的显示效果，只需向 components props 中传入你的渲染组件覆盖即可

比如，现在需要将所有1号标题的颜色设置成主色

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

12

 

1

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

2

​

3

​

4

function Demo() {

5

    const components = {}

6

7

    components['h2'] = ({children}) => <Typography.Title heading={2} style={{color:"var(--semi-color-text-2)"}}>{children}</Typography.Title>

8

9

    return <MarkdownRender raw={`## 从 Semi Design 到 Any Design  快速定义你的设计系统，并应用在设计稿和代码中`} components={components} />

10

}

11

​

12

export default Demo

Show Error

Auto Save

可以覆盖的基本元素 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 模式，在这种模式下无需转义特殊字符

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

12

 

1

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

2

​

3

​

4

function Demo() {

5

    const components ={};

6

7

    components['h1'] = ({children}) => <Typography.Title heading={1} style={{color:"var(--semi-color-primary)"}}>{children}</Typography.Title>

8

9

    return <MarkdownRender raw={`无需转义的符号{}<> ...`} format="md" components={components} />

10

}

11

​

12

export default Demo

Show Error

Auto Save

添加自定义组件

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

注意事项

注意尽量确保被渲染的 Markdown 内 JSX 代码可信，防止 XSS。

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

21

 

1

import { Button, MarkdownRender, Typography } from '@kousum/semi-ui-vue';

2

​

3

function Demo() {

4

    const components = {};

5

​

6

    components['MyButton'] = ({ children,onClick }) => {

7

        return <Button type={"primary"} onClick={onClick} style={{marginBottom:"12px"}}> {children} </Button>

8

    }

9

​

10

    return <MarkdownRender 

11

        raw={`

12

#### 下面是一个渲染在 Markdown 中的按钮

13

<MyButton onClick={()=>alert("点击了 MyButton")}>MyButton 点我</MyButton>

14

​

15

直接在 Markdown 中书写 JSX 即可

16

        `}

17

        components={{...MarkdownRender.defaultComponents,...components}}

18

        />

19

}

20

​

21

export default Demo

Show Error

Auto Save

添加插件

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

API

属性	说明	类型	默认值
className	类名	string	-
components	用于覆盖 Markdown 元素，也可添加自定义组件	Record<string, JSXElementConstructor>	-
format	传入的 raw 类型，是否是纯 Markdown	'md'|'mdx'	'mdx'
raw	Markdown 或 MDX 的纯文本	string	-
remarkPlugins	自定义 Remark Plugin	Remark Plugin Array	-
rehypePlugins	自定义 Rehype Plugin	Rehype Plugin Array	-
style	样式	CSSProperties	-

设计变量