{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/plus/markdownrender","result":{"data":{"current":{"frontmatter":{"title":"Markdown 渲染器","order":30,"brief":"在网页中即时渲染 Markdown 和 MDX","icon":"doc-markdown"},"fields":{"type":"plus"},"tableOfContents":{"items":[{"url":"#使用场景","title":"使用场景"},{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#修改元素样式","title":"修改元素样式"},{"url":"#仅纯-markdown","title":"仅纯 Markdown"},{"url":"#添加自定义组件","title":"添加自定义组件"},{"url":"#添加插件","title":"添加插件"},{"url":"#api","title":"API"}]},{"url":"#设计变量","title":"设计变量"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"localeCode\": \"zh-CN\",\n \"order\": 30,\n \"category\": \"Plus\",\n \"title\": \"Markdown 渲染器\",\n \"icon\": \"doc-markdown\",\n \"dir\": \"column\",\n \"brief\": \"在网页中即时渲染 Markdown 和 MDX\"\n};\nvar makeShortcode = function makeShortcode(name) {\n return function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n };\n};\nvar Notice = makeShortcode(\"Notice\");\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u4F7F\\u7528\\u573A\\u666F\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Markdown \\u662F\\u4E00\\u79CD\\u6587\\u6863\\u6807\\u8BB0\\u8BED\\u8A00\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7\\u7B80\\u5355\\u7684\\u6807\\u8BB0\\u5B9E\\u73B0\\u4F8B\\u5982\\u6807\\u9898\\uFF0C\\u56FE\\u7247\\uFF0C\\u8868\\u683C\\uFF0C\\u94FE\\u63A5\\uFF0C\\u52A0\\u7C97\\u7B49\\u57FA\\u672C\\u5E38\\u7528\\u5BCC\\u6587\\u672C\\u529F\\u80FD\\u3002\\nMDX \\u662F\\u5728 Markdown \\u57FA\\u7840\\u4E0A\\uFF0C\\u5141\\u8BB8\\u5F15\\u5165 JSX \\u5B9E\\u73B0\\u66F4\\u52A0\\u590D\\u6742\\u5B9A\\u5236\\u5316\\u7684\\u6587\\u6863\\u64B0\\u5199\\u4E0E\\u5C55\\u793A\\u9700\\u6C42\\u3002\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Semi \\u63D0\\u4F9B\\u7684 MarkdownRender \\u7EC4\\u4EF6\\u652F\\u6301\\u6E32\\u67D3 Markdown \\u548C MDX\\uFF0C\\u65E0\\u9700\\u7279\\u522B\\u914D\\u7F6E\\uFF0C\\u4F20\\u5165\\u7EAF\\u6587\\u672C\\u5373\\u53EF\\u6E32\\u67D3\\u51FA\\u7B26\\u5408 Semi \\u6837\\u5F0F\\u89C4\\u8303\\u7684\\u5BCC\\u6587\\u672C\\u5185\\u5BB9\\u3002\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u5E38\\u7528\\u4E8E\\u4E0B\\u5217\\u573A\\u666F\\uFF1A\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u6587\\u6863\\u7AD9\\u7F16\\u5199\\u4E0E\\u6E32\\u67D3\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u670D\\u52A1\\u7AEF\\u52A8\\u6001\\u751F\\u6210\\u5BCC\\u6587\\u672C\\u5185\\u5BB9\\u65F6\\uFF0C\\u524D\\u7AEF\\u6E32\\u67D3\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u504F\\u5185\\u5BB9\\u5C55\\u793A\\u7684\\u8F7B\\u4EA4\\u4E92\\u7F51\\u7AD9\")), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u6CE8\\u610F\\uFF1ASafari 16.3 \\u4E4B\\u524D\\u7684\\u7248\\u672C\\u4E0D\\u652F\\u6301\\u6B63\\u5219\\u73AF\\u89C6\\u65AD\\u8A00\\uFF0C\\u4F1A\\u5BFC\\u81F4\\u4E0A\\u6E38\\u4F9D\\u8D56 mdxjs \", mdx(\"a\", {\n parentName: \"strong\",\n \"href\": \"https://github.com/syntax-tree/mdast-util-gfm-autolink-literal/issues/10\"\n }, \"\\u62A5\\u9519\"), \"\\uFF0C\\u53EF\\u4EE5\\u4F20\\u5165 remarkGfm \\u4E3A false \\u5173\\u95ED gfm \\u8BED\\u6CD5\\u89E3\\u6790\\uFF08\\u4F1A\\u5BFC\\u81F4table \\u7B49markdown \\u7279\\u6027\\u65E0\\u6CD5\\u89E3\\u6790\\uFF09\\uFF0C\\u5E76\\u4E14\\u5728\\u9879\\u76EE\\u7F16\\u8BD1\\u65F6\\u4F7F\\u7528 null-loader \\u6216 alias \\u5176\\u4ED6\\u65B9\\u5F0F\\u5FFD\\u7565\\u6389 remark-gfm \\u8FD9\\u4E2A\\u5305\\u3002\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"MarkdownRender \\u4ECE v2.62.0 \\u5F00\\u59CB\\u652F\\u6301\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"\\u6CE8\\u610F\\uFF1AMarkdownRender \\u7EC4\\u4EF6 \\u4F9D\\u8D56 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"jsx/run-time\"), \"\\uFF0C\\u642D\\u914D\\u4F7F\\u7528 React \\u7248\\u672C\\u9700 > 16.14.0 \"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"import { MarkdownRender } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u5BFC\\u5165 MarkdownRender \\u540E\\uFF0C\\u76F4\\u63A5\\u4F20\\u5165 Markdown \\u6216 MDX \\u7EAF\\u6587\\u672C\\u5373\\u53EF\\u3002\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u6CE8\\u610F\\u56E0\\u4E3A \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"<\"), \" \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"{\"), \" \\u7B49\\u7B26\\u53F7\\u662F\\u5408\\u6CD5\\u7684 JSX \\u7B26\\u53F7\\u4F1A\\u88AB\\u5224\\u5B9A\\u4E3A\\u4EE3\\u7801\\uFF0C\\u65E0\\u6CD5\\u76F4\\u63A5\\u6E32\\u67D3\\uFF0C\\u9700\\u8981\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\\\\\"), \" \\u8F6C\\u4E49\\uFF0C\\u5982\\u679C\\u4F60\\u53EA\\u9700\\u8981\\u6E32\\u67D3\\u7EAF Markdown\\uFF0C\\u53C2\\u8003\\u4E0B\\u65B9\\u4EC5\\u6E32\\u67D3 Markdown \\u4E00\\u8282\\u3002\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import { MarkdownRender } from '@douyinfe/semi-ui';\\n\\n\\nfunction Demo(){\\n return \\u4E0B\\u5212\\u7EBF [\\u8D85\\u94FE\\u63A5](https://semi.design) \\u7B49 Markdown \\u4E0E HTML \\u7684\\u57FA\\u672C\\u8BED\\u6CD5\\u6240\\u652F\\u6301\\u7684\\u5BCC\\u6587\\u672C\\uFF0C\\u4E5F\\u652F\\u6301 emoji \\uD83C\\uDF70\\n\\n\\n\\u90E8\\u5206\\u7B26\\u53F7\\u9700\\u8981\\u8F6C\\u4E49 \\\\\\\\{\\\\\\\\} \\\\\\\\<\\\\\\\\> ...\\n\\n
\\n
\\n---\\n#### Semi Design DSM\\n[Semi DSM](https://semi.design/dsm) \\u662F Semi Design \\u63D0\\u4F9B\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u7BA1\\u7406\\u5DE5\\u5177\\uFF08Design System Management\\uFF09\\uFF0C\\u652F\\u6301\\u5168\\u5C40\\u3001\\u7EC4\\u4EF6\\u7EA7\\u522B\\u7684\\u6837\\u5F0F\\u5B9A\\u5236\\uFF0C\\u5E76\\u5728 Figma \\u548C\\u524D\\u7AEF\\u4EE3\\u7801\\u4E4B\\u95F4\\u4FDD\\u6301\\u540C\\u6B65 \\n\\u9002\\u7528\\u4E8E\\u5404\\u79CD\\u89C4\\u6A21\\u7684\\u56E2\\u961F\\uFF0C\\u65E0\\u8BBA\\u4F60\\u662F\\u9700\\u8981\\u7B80\\u5316\\u5DE5\\u4F5C\\u6D41\\u7A0B\\uFF0C\\u63D0\\u9AD8\\u56E2\\u961F\\u534F\\u4F5C\\uFF0C\\u8FD8\\u662F\\u589E\\u52A0\\u751F\\u4EA7\\u529B\\uFF0C\\u6211\\u4EEC\\u90FD\\u6709\\u9002\\u5408\\u4F60\\u7684\\u529F\\u80FD\\n\\n##### \\u4E2D\\u5927\\u578B\\u4F01\\u4E1A\\n- \\u591A\\u8FBE 3000+ Design Token\\uFF0C\\u6DF1\\u5165\\u6BCF\\u4E00\\u5904\\u7EC6\\u8282\\u7684\\u5B9A\\u5236\\u53EF\\u80FD\\uFF0C\\u8272\\u5F69\\uFF0C\\u9634\\u5F71\\uFF0C\\u8FB9\\u8DDD\\uFF0C\\u5706\\u89D2\\uFF0C\\u52A8\\u6548\\uFF0C\\u6E32\\u67D3\\u7ED3\\u6784\\u5747\\u53EF\\u81EA\\u7531\\u5B9A\\u5236\\uFF0C\\u544A\\u522B ~~CSS \\u786C\\u7F16\\u7801~~\\n- \\u529F\\u80FD\\u5F3A\\u5927\\uFF0C\\u7ECF\\u8FC7\\u6296\\u97F3\\u5185\\u90E8\\u6570\\u5343\\u9879\\u76EE\\u9A8C\\u8BC1\\u8FC7\\u7684 UI lib\\uFF0C\\u8F7B\\u677E\\u5E94\\u5BF9\\u5404\\u7C7B\\u590D\\u6742\\u573A\\u666F\\n- A11y \\u65E0\\u969C\\u788D\\u53CB\\u597D\\uFF0C\\u56FD\\u9645\\u5316\\u529F\\u80FD\\u5B8C\\u5907\\n- \\u9762\\u5411\\u793E\\u533A\\u5EFA\\u8BBE\\uFF0C\\u5B8C\\u5168\\u5F00\\u6E90\\uFF0C\\u65E0\\u4F7F\\u7528\\u9650\\u5236\\n- \\u4ECE designOps \\u5230 devOps\\uFF0C\\u81EA\\u52A8\\u5316\\u5DE5\\u4F5C\\u6D41\\uFF0CFigma UI Kit \\u4E00\\u952E\\u5237\\u5165\\u4E3B\\u9898\\uFF0C\\u751F\\u6210 Style Guideline\\uFF0C\\u7814\\u53D1\\u4E00\\u884C npm \\u4EE3\\u7801\\u914D\\u7F6E\\u63A5\\u5165\\n\\n##### \\u521D\\u521B\\u4F01\\u4E1A\\n- \\u65E0\\u9700\\u4ECE 0 \\u5230 1 \\u6295\\u5165\\u5927\\u91CF\\u7814\\u53D1\\u8D44\\u6E90\\uFF0C\\u5FEB\\u901F\\u590D\\u7528\\u5F00\\u6E90\\u793E\\u533A\\u4F18\\u79C0\\u65B9\\u6848, \\u4F4E\\u6210\\u672C\\u5FEB\\u901F\\u5B9A\\u5236\\u5177\\u5907\\u54C1\\u724C\\u7279\\u8272\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u3002\\n- \\u4E00\\u952E\\u652F\\u6301\\u6697\\u8272\\u6A21\\u5F0F\\u751F\\u6210\\uFF0C\\u652F\\u6301\\u6839\\u636E\\u54C1\\u724C\\u8272\\u5FEB\\u901F\\u751F\\u6210\\u5305\\u542B 320 \\u4E2A\\u5168\\u8272\\u9636\\u3001\\u517C\\u5BB9\\u6DF1/\\u6D45\\u4E24\\u79CD\\u6A21\\u5F0F\\u7684\\u8272\\u5F69\\u7CFB\\u7EDF\\uFF0C\\u5E76\\u652F\\u6301\\u52A8\\u6001\\u5207\\u6362\\n- \\u4E0D\\u65AD\\u8FDB\\u5316\\uFF0CDSM + Semi Design \\u7EC4\\u4EF6\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u67B6\\u6784\\u56E2\\u961F\\u4E13\\u4E1A\\u7EF4\\u62A4\\uFF0C\\u5DF2\\u7A33\\u5B9A\\u8FED\\u4EE3\\u4E94\\u5E74+\\uFF0C\\u503C\\u5F97\\u4FE1\\u8D56\\n\\n##### \\u81EA\\u7531\\u8BBE\\u8BA1\\u5E08/\\u4E2A\\u4EBA\\u5F00\\u53D1\\u8005\\n- \\u4F4E\\u6210\\u672C\\u5FEB\\u901F\\u521B\\u5EFA\\u98CE\\u683C\\u5404\\u5F02\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u66F4\\u5C11\\u65F6\\u95F4\\uFF0C\\u66F4\\u5FEB\\u4EA4\\u4ED8\\n- \\u7814\\u53D1\\u63A5\\u5165\\u53CB\\u597D\\uFF0C\\u65E0\\u9700\\u53CD\\u590D\\u6C9F\\u901A\\uFF0C\\u4EA4\\u4ED8npm\\u5305\\u4EA7\\u7269\\uFF0C\\u4E00\\u952E\\u5B8C\\u6210\\u4EE3\\u7801\\u63A5\\u5165\\n\\n\\n![DSM](https://semi.design/dsm_manual/content/introduction/start/start-intro.png)\\n\\n---\\n\\n#### MarkdownRender \\u6E32\\u67D3\\u5217\\u8868\\u8BED\\u6CD5\\n- \\u597D\\u597D\\u5730\\u5403\\u996D\\n- \\u597D\\u597D\\u5730\\u7761\\u89C9\\n- \\u597D\\u597D\\u5730\\u6E38\\u73A9\\n- \\u597D\\u597D\\u5730\\u5B66\\u4E60\\n- \\u597D\\u597D\\u5730\\u804A\\u5929\\n- \\u597D\\u597D\\u5730\\u5435\\u67B6\\n- \\u8FC7\\u7740\\u5E73\\u51E1\\u666E\\u901A\\u7684\\u6BCF\\u65E5 \\n\\n| \\u652F\\u6301 | Markdown \\u8868\\u683C | c | d |\\n| - | :- | -: | :-: |\\n| 1 | 2 | 3 | 4 |\\n| 21 | 22 | 23 | 24 |\\n| 31 | 32 | 33 | 34 |\\n| 41 | 42 | 43 | 44 |\\n\\n `}/>\\n}\\n\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u4FEE\\u6539\\u5143\\u7D20\\u6837\\u5F0F\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u4F60\\u53EF\\u4EE5\\u4EFB\\u610F\\u66FF\\u6362 Markdown \\u6216 MDX \\u6587\\u6863\\u4E2D\\u7684\\u6587\\u6863\\u5143\\u7D20\\u7684\\u663E\\u793A\\u6548\\u679C\\uFF0C\\u53EA\\u9700\\u5411 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"components\"), \" props \\u4E2D\\u4F20\\u5165\\u4F60\\u7684\\u6E32\\u67D3\\u7EC4\\u4EF6\\u8986\\u76D6\\u5373\\u53EF\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u6BD4\\u5982\\uFF0C\\u73B0\\u5728\\u9700\\u8981\\u5C06\\u6240\\u67091\\u53F7\\u6807\\u9898\\u7684\\u989C\\u8272\\u8BBE\\u7F6E\\u6210\\u4E3B\\u8272\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import { MarkdownRender, Typography } from '@douyinfe/semi-ui';\\n\\n\\nfunction Demo() {\\n const components = {}\\n \\n components['h2'] = ({children}) => {children}\\n \\n return \\n}\\n\\n\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u53EF\\u4EE5\\u8986\\u76D6\\u7684\\u57FA\\u672C\\u5143\\u7D20 tag \\u652F\\u6301 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"a blockquote br code em h1 h2 h3 h4 h5 hr img li ol p pre strong ul table\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u4EC5\\u7EAF Markdown\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u5F53\\u4F60\\u6E32\\u67D3\\u7684 Markdown \\u4EC5\\u4EC5\\u662F\\u7EAF markdown\\uFF0C\\u4E0D\\u5305\\u542B\\u4EFB\\u4F55 JSX \\u4EE3\\u7801\\u65F6\\uFF0C\\u53EF\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"format=\\\"md\\\"\"), \" \\u6765\\u5F00\\u542F\\u4EC5 Markdown \\u6A21\\u5F0F\\uFF0C\\u5728\\u8FD9\\u79CD\\u6A21\\u5F0F\\u4E0B\\u65E0\\u9700\\u8F6C\\u4E49\\u7279\\u6B8A\\u5B57\\u7B26\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import { MarkdownRender, Typography } from '@douyinfe/semi-ui';\\n\\n\\nfunction Demo() {\\n const components ={};\\n \\n components['h1'] = ({children}) => {children}\\n \\n return ...`} format=\\\"md\\\" components={components} />\\n}\\n\\n\")), mdx(Notice, {\n type: \"primary\",\n title: \"format='md' \\u6A21\\u5F0F\\u4E0B HTML \\u6807\\u7B7E\\u7684\\u5904\\u7406\",\n mdxType: \"Notice\"\n }, mdx(\"div\", null, \"\\u5728 format=\\\"md\\\" \\u6A21\\u5F0F\\u4E0B\\uFF0CMarkdown \\u4E2D\\u5D4C\\u5165\\u7684 raw HTML\\uFF08\\u5982 \", '`
`', \"\\u3001\", '``', \" \\u7B49\\uFF09\\u4F1A\\u88AB\\u5E95\\u5C42\\u7F16\\u8BD1\\u5668\\u79FB\\u9664\\uFF0C\\u4E0D\\u4F1A\\u6E32\\u67D3\\u5230\\u9875\\u9762\\u4E0A\\u3002\\u8FD9\\u662F @mdx-js/mdx \\u5728 md \\u6A21\\u5F0F\\u4E0B\\u7684\\u9ED8\\u8BA4\\u884C\\u4E3A\\u3002\"), mdx(\"div\", null, \"\\u5982\\u679C\\u4F60\\u9700\\u8981\\u5728 format=\\\"md\\\" \\u6A21\\u5F0F\\u4E0B\\u4FDD\\u7559 HTML \\u6807\\u7B7E\\u7684\\u6E32\\u67D3\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 rehypePlugins \\u4F20\\u5165 rehype-raw \\u63D2\\u4EF6\\uFF1A\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"import { MarkdownRender } from '@douyinfe/semi-ui';\\nimport rehypeRaw from 'rehype-raw';\\n\\nfunction Demo() {\\n return \\u7EA2\\u8272\\u6587\\u5B57`} \\n rehypePlugins={[rehypeRaw]} \\n />\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u6DFB\\u52A0\\u81EA\\u5B9A\\u4E49\\u7EC4\\u4EF6\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7\\u4F20\\u5165\\u81EA\\u5B9A\\u4E49\\u7EC4\\u4EF6\\u5230 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"components\"), \" Props\\uFF0C\\u80FD\\u591F\\u5B9E\\u73B0\\u5728 Markdown \\u4E2D\\u76F4\\u63A5\\u4E66\\u5199 JSX\\uFF0C\\u7EC4\\u4EF6\\u4F1A\\u88AB\\u6E32\\u67D3\\u5230\\u6700\\u7EC8\\u9875\\u9762\\u4E0A\\uFF0C\\u652F\\u6301 JS \\u4E8B\\u4EF6\\u3002\\n\\u9ED8\\u8BA4\\u7684 Markdown \\u7EC4\\u4EF6\\u53EF\\u4ECE \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"MarkdownRender.defaultComponents\"), \" \\u4E2D\\u83B7\\u53D6\\uFF0C\\u53EF\\u4EE5\\u7528\\u4E8E\\u4E8C\\u6B21\\u5C01\\u88C5\\u3002\"), mdx(Notice, {\n type: \"primary\",\n title: \"\\u6CE8\\u610F\\u4E8B\\u9879\",\n mdxType: \"Notice\"\n }, mdx(\"div\", null, \"\\u6CE8\\u610F\\u5C3D\\u91CF\\u786E\\u4FDD\\u88AB\\u6E32\\u67D3\\u7684 Markdown \\u5185 JSX \\u4EE3\\u7801\\u53EF\\u4FE1\\uFF0C\\u9632\\u6B62 XSS\\u3002\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import { Button, MarkdownRender, Typography } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n const components = {};\\n\\n components['MyButton'] = ({ children,onClick }) => {\\n return \\n }\\n\\n return alert(\\\"\\u70B9\\u51FB\\u4E86 MyButton\\\")}>MyButton \\u70B9\\u6211\\n\\n\\u76F4\\u63A5\\u5728 Markdown \\u4E2D\\u4E66\\u5199 JSX \\u5373\\u53EF\\n `}\\n components={{...MarkdownRender.defaultComponents,...components}}\\n />\\n}\\n\\n\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u6DFB\\u52A0\\u63D2\\u4EF6\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"remarkPlugins\"), \" \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"rehypePlugins\"), \" \\u652F\\u6301 MDXJS \\u7684\\u6240\\u6709 RemarkPlugin \\u548C RehypePlugins \\u63D2\\u4EF6\\uFF0C\\u8BE6\\u60C5\\u8BF7\\u53C2\\u8003 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://mdxjs.com/docs/extending-mdx/\"\n }, \"MDXJS\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"API\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"className\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7C7B\\u540D\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"components\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7528\\u4E8E\\u8986\\u76D6 Markdown \\u5143\\u7D20\\uFF0C\\u4E5F\\u53EF\\u6DFB\\u52A0\\u81EA\\u5B9A\\u4E49\\u7EC4\\u4EF6\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Record\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"format\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u4F20\\u5165\\u7684 raw \\u7C7B\\u578B\\uFF0C\\u662F\\u5426\\u662F\\u7EAF Markdown\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"'md'\", \"|\", \"'mdx'\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"'mdx'\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"raw\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Markdown \\u6216 MDX \\u7684\\u7EAF\\u6587\\u672C\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"remarkGfm\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u662F\\u5426\\u5F00\\u542F Github GFM \\u8BED\\u6CD5\\uFF0Csafari 16.3 \\u4E4B\\u524D\\u4E0D\\u652F\\u6301\\u73AF\\u89C6\\u65AD\\u8A00\\u4F1A\\u62A5\\u9519\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"bool\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"remarkPlugins\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u81EA\\u5B9A\\u4E49 Remark Plugin\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Remark Plugin Array\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"rehypePlugins\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u81EA\\u5B9A\\u4E49 Rehype Plugin\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Rehype Plugin Array\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u6837\\u5F0F\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CSSProperties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/plus/markdownrender","next":{"fields":{"slug":"en-US/plus/dragMove"},"id":"cd268d27-a8e1-5d96-9a72-5350252a09e5","frontmatter":{"title":"DragMove","localeCode":"en-US","icon":"doc-dragmove","showNew":null}},"previous":{"fields":{"slug":"en-US/plus/markdownrender"},"id":"ef38a833-c206-55be-93f3-57befa9e334b","frontmatter":{"title":"Markdown Render","localeCode":"en-US","icon":"doc-markdown","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}