Plus/markdown render (#2196)

* chore: add changelog
* chore: add eslint rule space-infix-ops
* chore: alpha release in v2.56.4-alpha.5

---------

Co-authored-by: pointhalo <[email protected]>
Co-authored-by: 林艳 <[email protected]>

.eslintrc.js

@@ -117,6 +117,7 @@ module.exports = {
                 'object-curly-spacing': ['error', 'always'],
                 'prefer-const': 'off',
                 'semi-design/no-import': 'error',
+                "space-infix-ops": ["error", { "int32Hint": false }],
                 'space-before-blocks': ['error', 'always'],
                 "@typescript-eslint/type-annotation-spacing": ['error', {"after": true}],
                 "@typescript-eslint/member-delimiter-style": [

babel.config.js

@@ -13,6 +13,7 @@ module.exports = {
         '@babel/preset-typescript'
     ],
     plugins: [
+        "@babel/plugin-transform-numeric-separator",
         '@babel/plugin-transform-runtime',
         [
             '@babel/plugin-proposal-decorators',

content/feedback/banner/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 68
+order: 69
 category: Feedback
 title:  Banner
 subTitle: Banner

content/feedback/banner/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 68
+order: 69
 category: 反馈类
 title:  Banner 通知横幅
 icon: doc-banner

content/feedback/notification/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 69
+order: 70
 category: Feedback
 title:  Notification
 subTitle: Notification

content/feedback/notification/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 69
+order: 70
 category: 反馈类
 title: Notification 通知
 icon: doc-notification

content/feedback/popconfirm/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 70
+order: 71
 category: Feedback
 title:  Popconfirm
 subTitle: Popconfirm

content/feedback/popconfirm/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 70
+order: 71
 category: 反馈类
 title:  Popconfirm 气泡确认框
 icon: doc-popconfirm

content/feedback/progress/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 71
+order: 72
 category: Feedback
 title: Progress
 subTitle: Progress

content/feedback/progress/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 71
+order: 72
 category: 反馈类
 title: Progress 进度条
 icon: doc-progress

content/feedback/skeleton/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 72
+order: 73
 category: Feedback
 title: Skeleton
 subTitle: Skeleton

content/feedback/skeleton/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 72
+order: 73
 category: 反馈类
 title: Skeleton 骨架屏
 icon: doc-skeleton

content/feedback/spin/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 73
+order: 74
 category: Feedback
 title: Spin
 subTitle: Spin

content/feedback/spin/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 73
+order: 74
 category: 反馈类
 title: Spin 加载器
 icon: doc-spin

content/feedback/toast/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 74
+order: 75
 category: Feedback
 title: Toast
 subTitle: Toast

content/feedback/toast/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 74
+order: 75
 category: 反馈类
 title: Toast 提示
 icon: doc-toast

content/input/autocomplete/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 20
+order: 21
 category: Input
 title: AutoComplete
 icon: doc-autocomplete

content/input/autocomplete/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 20
+order: 21
 category: 输入类
 title: AutoComplete 自动完成
 icon: doc-autocomplete

content/input/cascader/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 21
+order: 22
 category: Input
 title:  Cascader
 subTitle: Cascade

content/input/cascader/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 21
+order: 22
 category: 输入类
 title:  Cascader 级联选择
 icon: doc-cascader

content/input/checkbox/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 22
+order: 23
 category: Input
 title:  Checkbox
 subTitle: Checkbox

content/input/checkbox/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 22
+order: 23
 category: 输入类
 title: Checkbox 复选框
 icon: doc-checkbox

content/input/datepicker/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 23
+order: 24
 category: Input
 title: DatePicker
 subTitle: Date Selector

content/input/datepicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 23
+order: 24
 category: 输入类
 title: DatePicker 日期选择器
 icon: doc-datepicker

content/input/form/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 24
+order: 25
 category: Input
 title:  Form
 subTitle: Form

content/input/form/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 24
+order: 25
 category: 输入类
 title:  Form 表单
 icon: doc-form

content/input/input/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 25
+order: 26
 category: Input
 title:  Input
 subTitle: Input

content/input/input/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 25
+order: 26
 category: 输入类
 title:  Input 输入框
 icon: doc-input

content/input/inputnumber/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 26
+order: 27
 category: Input
 title:  InputNumber
 subTitle: InputNumber

content/input/inputnumber/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 26
+order: 27
 category: 输入类
 title: InputNumber 数字输入框
 icon: doc-inputnumber

content/input/radio/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 27
+order: 28
 category: Input
 title: Radio
 subTitle: Radio

content/input/radio/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 27
+order: 28
 category: 输入类
 title: Radio 单选框
 icon: doc-radio

content/input/rating/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 28
+order: 29
 category: Input
 title: Rating
 subTitle: Rating

content/input/rating/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 28
+order: 29
 category: 输入类
 title:  Rating 评分
 icon: doc-rating

content/input/select/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 29
+order: 30
 category: Input
 title: Select
 subTitle: Select

content/input/select/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 29
+order: 30
 category: 输入类
 title: Select 选择器
 icon: doc-select

content/input/slider/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 30
+order: 31
 category: Input
 title:  Slider
 subTitle: Slider

content/input/slider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 30
+order: 31
 category: 输入类
 title:  Slider 滑动选择器
 icon: doc-slider

content/input/switch/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 31
+order: 32
 category: Input
 title: Switch
 subTitle: Switch

content/input/switch/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 31
+order: 32
 category: 输入类
 title: Switch 开关
 icon: doc-switch

content/input/taginput/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 32
+order: 33
 category: Input
 title: TagInput
 subTitle: TagInput

content/input/taginput/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 32
+order: 33
 category: 输入类
 title: TagInput 标签输入框
 icon: doc-tagInput

content/input/timepicker/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 33
+order: 34
 category: Input
 title: TimePicker
 subTitle: TimePicker

content/input/timepicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 33
+order: 34
 category: 输入类
 title: TimePicker 时间选择器
 icon: doc-timepicker

content/input/transfer/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 34
+order: 35
 category: Input
 title: Transfer
 icon: doc-transfer

content/input/transfer/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 34
+order: 35
 category: 输入类
 title: Transfer 穿梭框
 icon: doc-transfer

content/input/treeselect/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 35
+order: 36
 category: Input
 title:  TreeSelect
 subTitle: TreeSelect

content/input/treeselect/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 35
+order: 36
 category: 输入类
 title: TreeSelect 树选择器
 icon: doc-treeselect

content/input/upload/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 36
+order: 37
 category: Input
 title: Upload
 icon: doc-upload

content/input/upload/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 36
+order: 37
 category: 输入类
 title: Upload 上传
 icon: doc-upload

content/navigation/anchor/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 37
+order: 38
 category: Navigation
 title:  Anchor
 subTitle: Anchor

content/navigation/anchor/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 37
+order: 38
 category: 导航类
 title:  Anchor 锚点
 icon: doc-anchor

content/navigation/backtop/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 38
+order: 39
 category: Navigation
 title: BackTop
 subTitle: BackTop

content/navigation/backtop/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 38
+order: 39
 category: 导航类
 title: BackTop 回到顶部
 icon: doc-backtop

content/navigation/breadcrumb/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 39
+order: 40
 category: Navigation
 title:  Breadcrumb
 subTitle: Breadcrumb

content/navigation/breadcrumb/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 39
+order: 40
 category: 导航类
 title:  Breadcrumb 面包屑
 icon: doc-breadcrumb

content/navigation/navigation/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 40
+order: 41
 category: Navigation
 title:  Navigation
 subTitle: Navigation

content/navigation/navigation/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 40
+order: 41
 category: 导航类
 title:  Navigation 导航
 icon: doc-navigation

content/navigation/pagination/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 41
+order: 42
 category: Navigation
 title:  Pagination
 subTitle: Pagination

content/navigation/pagination/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 41
+order: 42
 category: 导航类
 title:  Pagination 翻页器
 icon: doc-pagination

content/navigation/steps/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 42
+order: 43
 category: Navigation
 title: Steps
 subTitle: Steps

content/navigation/steps/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 42
+order: 43
 category: 导航类
 title:  Steps 步骤
 icon: doc-steps

content/navigation/tabs/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 43
+order: 44
 category: Navigation
 title: Tabs
 subTitle: Tabs

content/navigation/tabs/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 43
+order: 44
 category: 导航类
 title: Tabs 标签栏
 icon: doc-tabs

content/navigation/tree/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 44
+order: 45
 category: Navigation
 title:  Tree
 subTitle: Tree

content/navigation/tree/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 44
+order: 45
 category: 导航类
 title:  Tree 树形控件
 icon: doc-tree

content/order.js

@@ -18,6 +18,7 @@ const order = [
     'button',
     'space',
     'typography',
+    "markdownrender",
     'autocomplete',
     'cascader',
     'checkbox',

content/other/configprovider/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 75
+order: 76
 category: Other
 title: ConfigProvider
 icon: doc-configprovider

content/other/configprovider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 75
+order: 76
 category: 其他
 title:  ConfigProvider 全局配置
 icon: doc-configprovider

content/other/locale/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 76
+order: 77
 category: Other
 title: LocaleProvider
 subTitle: LocaleProvider

content/other/locale/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 76
+order: 77
 category: 其他
 title:  LocaleProvider 多语言
 icon: doc-i18n

content/plus/markdownrender/index-en-US.md

@@ -0,0 +1,147 @@
+---
+localeCode: en-US
+order: 20
+category: Plus
+title:  Markdown Render
+icon: doc-configprovider
+dir: column
+brief: Instantly render Markdown and MDX in web pages
+---
+
+## When to use
+
+Markdown is a document markup language that can implement basic common rich text functions such as titles, pictures, tables, links, bolding, etc. through simple tags.
+MDX is based on Markdown and allows the introduction of JSX to achieve more complex and customized document writing and display requirements.
+
+The MarkdownRender component provided by Semi supports rendering Markdown and MDX. No special configuration is required. By passing in plain text, rich text content that conforms to Semi style specifications can be rendered.
+
+
+Usually used in the following scenarios:
+- Document station writing and rendering
+- Front-end rendering when the server dynamically generates rich text content
+- A light interactive website that focuses on content display
+
+
+## Demos
+
+### How to import
+
+```jsx
+import { MarkdownRender } from '@douyinfe/semi-ui';
+import * as SemiMarkdownComponents from "@douyinfe/semi-ui/markdownRender/components"
+```
+
+
+
+### Basic usage
+After importing MarkdownRender, just pass in Markdown or MDX plain text directly.
+
+Introducing SemiMarkdownComponents and passing it into MarkdownRender, basic elements in the document such as text, titles, hyperlinks, pictures, tables, etc. will be rendered using Semi components. Not everyone needs these document elements, so in order to reduce the package size, they need to be introduced manually.
+
+```jsx live=true dir="column"
+import { MarkdownRender } from '@douyinfe/semi-ui';
+import * as SemiMarkdownComponents from "@douyinfe/semi-ui/markdownRender/components"
+
+
+function Demo(){
+    return <MarkdownRender components={SemiMarkdownComponents} mdxRaw={`
+# Title No. 1
+## Title No. 2
+### Title No. 3
+
+The main text content is ordinary text, and it can also be **bold**~~strikethrough~~ and <u>underline</u> [Hyperlink](https://semi.design) etc. Basic syntax of Markdown and HTML Supported rich text
+
+#### List syntax support
+- Eat well
+- sleep well
+- Have fun
+- Study hard
+- have a good chat
+- Have a good argument
+- Live an ordinary day
+
+![Colorful World](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/colorful.jpg)
+    
+| Support | Markdown tables | c | d |
+| - | :- | -: | :-: |
+| 1 | 2 | 3 | 4 |
+| 21 | 22 | 23 | 24 |
+| 31 | 32 | 33 | 34 |
+| 41 | 42 | 43 | 44 |
+    `}/>
+}
+
+```
+
+### Modify element style
+
+You can arbitrarily replace the display effect of document elements in Markdown or MDX documents. Just pass your rendering component override to the `components` props.
+
+For example, now you need to set the color of all headings No. 1 to the main color
+
+```jsx live=true
+import { MarkdownRender, Typography } from '@douyinfe/semi-ui';
+import * as SemiMarkdownComponents from "@douyinfe/semi-ui/markdownRender/components"
+
+
+function Demo() {
+    const components ={...SemiMarkdownComponents};
+    
+    components['h1'] = ({children}) => <Typography.Title heading={1} style={{color:"var(--semi-color-primary)"}}>{children}</Typography.Title>
+    
+    return <MarkdownRender mdxRaw={`# Primary Color Title`} components={components} />
+}
+
+
+```
+
+Basic element tag support that can be overridden `a blockquote br code em h1 h2 h3 h4 h5 hr img li ol p pre strong ul table`
+
+
+
+### Add custom components
+
+By passing in custom components to `components` Props, you can write JSX directly in Markdown, and the component will be rendered to the final page, supporting JS events.
+
+<Notice type="primary" title="Note">
+   <div>Try to ensure that the JSX code in the rendered Markdown is trustworthy to prevent XSS. </div>
+</Notice>
+
+
+```jsx live=true
+import { Button, MarkdownRender, Typography } from '@douyinfe/semi-ui';
+import * as SemiMarkdownComponents from "@douyinfe/semi-ui/markdownRender/components"
+
+
+function Demo() {
+    const components = { ...SemiMarkdownComponents };
+
+    components['MyButton'] = ({ children,onClick }) => {
+        return <Button type={"primary"} onClick={onClick} style={{marginBottom:"12px"}}> {children} </Button>
+    }
+
+    return <MarkdownRender 
+        mdxRaw={`
+#### Below is a button rendered in Markdown
+<MyButton onClick={()=>alert("MyButton is clicked")}>MyButton click me</MyButton>
+
+Just write JSX directly in Markdown
+        `} 
+        components={components} />
+}
+
+
+```
+
+
+### MarkdownRender
+
+| PROPERTIES         | INSTRUCTIONS                         | TYPE                                    | DEFAULT |
+|------------|----------------------------|---------------------------------------| --- |
+| mdxRaw     | Plain text in Markdown or MDX        | string                                | - |
+| components | Used to cover Markdown elements and also add custom components | Record<string, JSXElementConstructor> | - |
+
+## Design Token
+
+<DesignToken/>
+

content/plus/markdownrender/index.md

@@ -0,0 +1,187 @@
+---
+localeCode: zh-CN
+order: 20
+category: Plus
+title:  Markdown 渲染器
+icon: doc-configprovider
+dir: column
+brief: 在网页中即时渲染 Markdown 和 MDX
+---
+
+## 使用场景
+
+Markdown 是一种文档标记语言，可以通过简单的标记实现例如标题，图片，表格，链接，加粗等基本常用富文本功能。
+MDX 是在 Markdown 基础上，允许引入 JSX 实现更加复杂定制化的文档撰写与展示需求。
+
+Semi 提供的 MarkdownRender 组件支持渲染 Markdown 和 MDX，无需特别配置，传入纯文本即可渲染出符合 Semi 样式规范的富文本内容。
+
+
+通常用于下列场景：
+- 文档站编写与渲染
+- 服务端动态生成富文本内容时，前端渲染
+- 偏内容展示的轻交互网站
+
+
+## 代码演示
+
+### 如何引入
+
+```jsx
+import { MarkdownRender } from '@douyinfe/semi-ui';
+```
+
+
+
+### 基本用法
+导入 MarkdownRender 后，直接传入 Markdown 或 MDX 纯文本即可。
+
+注意因为 `<` `{` 等符号是合法的 JSX 符号会被判定为代码，无法直接渲染，需要使用 `\` 转义，如果你只需要渲染纯 Markdown，参考下方仅渲染 Markdown 一节。
+
+```jsx live=true dir="column"
+import { MarkdownRender } from '@douyinfe/semi-ui';
+
+
+function Demo(){
+    return <MarkdownRender raw={`
+## 
+
+正文内容是普通的文本，也可以**加粗**~~删除线~~和<u>下划线</u> [超链接](https://semi.design) 等 Markdown 与 HTML 的基本语法所支持的富文本，也支持 emoji 🍰
+
+
+部分符号需要转义 \\{\\} \\<\\> ...
+
+<br/>
+<br/>
+---
+#### Semi Design DSM
+[Semi DSM](https://semi.design/dsm) 是 Semi Design 提供的设计系统管理工具（Design System Management），支持全局、组件级别的样式定制，并在 Figma 和前端代码之间保持同步  
+适用于各种规模的团队，无论你是需要简化工作流程，提高团队协作，还是增加生产力，我们都有适合你的功能
+
+##### 中大型企业
+- 多达 3000+ Design Token，深入每一处细节的定制可能，色彩，阴影，边距，圆角，动效，渲染结构均可自由定制，告别 ~~CSS 硬编码~~
+- 功能强大，经过抖音内部数千项目验证过的 UI lib，轻松应对各类复杂场景
+- A11y 无障碍友好，国际化功能完备
+- 面向社区建设，完全开源，无使用限制
+- 从 designOps 到 devOps，自动化工作流，Figma UI Kit 一键刷入主题，生成 Style Guideline，研发一行 npm 代码配置接入
+
+##### 初创企业
+- 无需从 0 到 1 投入大量研发资源，快速复用开源社区优秀方案, 低成本快速定制具备品牌特色的设计系统。
+- 一键支持暗色模式生成，支持根据品牌色快速生成包含 320 个全色阶、兼容深/浅两种模式的色彩系统，并支持动态切换
+- 不断进化，DSM + Semi Design 组件由<u>抖音前端架构团队</u>专业维护，已稳定迭代五年+，值得信赖
+
+##### 自由设计师/个人开发者
+- 低成本快速创建风格各异的设计系统，更少时间，更快交付
+- 研发接入友好，无需反复沟通，交付npm包产物，一键完成代码接入
+
+
+![DSM](https://semi.design/dsm_manual/content/introduction/start/start-intro.png)
+
+---
+
+#### MarkdownRender 渲染列表语法
+- 好好地吃饭
+- 好好地睡觉
+- 好好地游玩
+- 好好地学习
+- 好好地聊天
+- 好好地吵架
+- 过着平凡普通的每日 
+
+| 支持 | Markdown 表格 |  c |  d  |
+| - | :- | -: | :-: |
+| 1 | 2 | 3 | 4 |
+| 21 | 22 | 23 | 24 |
+| 31 | 32 | 33 | 34 |
+| 41 | 42 | 43 | 44 |
+
+    `}/>
+}
+
+```
+
+### 修改元素样式
+
+你可以任意替换 Markdown 或 MDX 文档中的文档元素的显示效果，只需向 `components` props 中传入你的渲染组件覆盖即可
+
+比如，现在需要将所有1号标题的颜色设置成主色
+
+```jsx live=true
+import { MarkdownRender, Typography } from '@douyinfe/semi-ui';
+
+
+function Demo() {
+    const components = {}
+    
+    components['h1'] = ({children}) => <Typography.Title heading={1} style={{color:"var(--semi-color-primary)"}}>{children}</Typography.Title>
+    
+    return <MarkdownRender raw={`# 从 Semi Design 到 Any Design  快速定义你的设计系统，并应用在设计稿和代码中`} components={components} />
+}
+
+
+```
+
+可以覆盖的基本元素 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 模式，在这种模式下无需转义特殊字符
+
+```jsx live=true
+import { MarkdownRender, Typography } from '@douyinfe/semi-ui';
+
+
+function Demo() {
+    const components ={};
+    
+    components['h1'] = ({children}) => <Typography.Title heading={1} style={{color:"var(--semi-color-primary)"}}>{children}</Typography.Title>
+    
+    return <MarkdownRender raw={`无需转义的符号{}<> ...`} format="md" components={components} />
+}
+
+```
+
+### 添加自定义组件
+
+通过传入自定义组件到 `components` Props，能够实现在 Markdown 中直接书写 JSX，组件会被渲染到最终页面上，支持 JS 事件。
+
+<Notice type="primary" title="注意事项">
+  <div>注意尽量确保被渲染的 Markdown 内 JSX 代码可信，防止 XSS。</div>
+</Notice>
+
+
+```jsx live=true
+import { Button, MarkdownRender, Typography } from '@douyinfe/semi-ui';
+
+function Demo() {
+    const components = {};
+
+    components['MyButton'] = ({ children,onClick }) => {
+        return <Button type={"primary"} onClick={onClick} style={{marginBottom:"12px"}}> {children} </Button>
+    }
+
+    return <MarkdownRender 
+        raw={`
+#### 下面是一个渲染在 Markdown 中的按钮
+<MyButton onClick={()=>alert("点击了 MyButton")}>MyButton 点我</MyButton>
+
+直接在 Markdown 中书写 JSX 即可
+        `}
+        components={components}
+        />
+}
+
+
+```
+
+
+### MarkdownRender
+
+| 属性         | 说明                         | 类型                                    | 默认值   |
+|------------|----------------------------|---------------------------------------|-------|
+| components | 用于覆盖 Markdown 元素，也可添加自定义组件 | Record<string, JSXElementConstructor> | -     |
+| raw        | Markdown 或 MDX 的纯文本        | string                                | -     |
+| format     | 传入的 raw 类型，是否是纯 Markdown   | 'md'\|'mdx'                           | 'mdx' |
+
+## 设计变量
+
+<DesignToken/>
+

content/show/avatar/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 45
+order: 46
 category: Show
 title:  Avatar
 subTitle: avatar

content/show/avatar/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 45
+order: 46
 category: 展示类
 title: Avatar 头像
 icon: doc-avatar

content/show/badge/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 46
+order: 47
 category: Show
 title:  Badge
 subTitle: Badge

content/show/badge/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 46
+order: 47
 category: 展示类
 title:  Badge 徽章
 icon: doc-badge

content/show/calendar/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 47
+order: 48
 category: Show
 title:  Calendar
 subTitle: Calendar

content/show/calendar/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 47
+order: 48
 category: 展示类
 title: Calendar 日历
 icon: doc-calendar

content/show/card/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 48
+order: 49
 category: Show
 title:  Card
 subTitle: Card

content/show/card/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 48
+order: 49
 category: 展示类
 title:  Card 卡片
 subTitle: 卡片

content/show/carousel/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 49
+order: 50
 category: Show
 title: Carousel
 subTitle: Carousel

content/show/carousel/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 49
+order: 50
 category: 展示类
 title: Carousel 轮播图
 icon: doc-carousel

content/show/chart/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 67
+order: 68
 category: Show
 title: Data Visualization
 icon: doc-vchart

content/show/chart/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 67
+order: 68
 category: 展示类
 title:  Data Visualization 数据可视化
 icon: doc-vchart

content/show/collapse/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 50
+order: 51
 category: Show
 title: Collapse
 subTitle: Collapse

content/show/collapse/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 50
+order: 51
 category: 展示类
 title: Collapse 折叠面板
 icon: doc-accordion

content/show/collapsible/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 51
+order: 52
 category: Show
 title: Collapsible
 subTitle: Collapsible

content/show/collapsible/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 51
+order: 52
 category: 展示类
 title: Collapsible 折叠
 icon: doc-collapsible

content/show/descriptions/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 52
+order: 53
 category: Show
 title: Description
 subTitle: Descriptions

content/show/descriptions/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 52
+order: 53
 category: 展示类
 title: Descriptions 描述列表
 icon: doc-descriptions

content/show/dropdown/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 53
+order: 54
 category: Show
 title: Dropdown
 subTitle: Dropdown

content/show/dropdown/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 53
+order: 54
 category: 展示类
 title: Dropdown 下拉框
 icon: doc-dropdown

content/show/empty/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 54
+order: 55
 category: Show
 title: Empty
 subTitle: Empty

content/show/empty/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 54
+order: 55
 category: 展示类
 title: Empty 空状态
 icon: doc-empty

content/show/highlight/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 55
+order: 56
 category: Show
 title: Highlight 
 icon: doc-highlight

content/show/highlight/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 55
+order: 56
 category: 展示类
 title: Highlight 高亮文本
 icon: doc-highlight

content/show/image/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 56
+order: 57
 category: Show
 title: Image
 icon: doc-image

content/show/image/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 56
+order: 57
 category: 展示类
 title: Image 图片
 icon: doc-image

content/show/list/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 57
+order: 58
 category: Show
 title: List
 subTitle: List