{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/show/highlight","result":{"data":{"current":{"frontmatter":{"title":"Highlight 高亮文本","order":72,"brief":"高亮特定内容","icon":"doc-highlight"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#指定高亮样式","title":"指定高亮样式"},{"url":"#不同文本使用差异化样式","title":"不同文本使用差异化样式"},{"url":"#指定高亮标签","title":"指定高亮标签"}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#highlight","title":"Highlight"}]}]},"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\": 72,\n \"category\": \"展示类\",\n \"title\": \"Highlight 高亮文本\",\n \"icon\": \"doc-highlight\",\n \"dir\": \"column\",\n \"noInline\": true,\n \"brief\": \"高亮特定内容\"\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 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 }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Highlight \\u4ECE v2.24.0 \\u7248\\u672C\\u5F00\\u59CB\\u652F\\u6301\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"import\",\n \"import\": true\n }, \"import { Highlight } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"searchWords\"), \" \\u6307\\u5B9A\\u9700\\u8981\\u9AD8\\u4EAE\\u7684\\u5173\\u952E\\u5B57\\uFF0C\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"sourceString\"), \" \\u6307\\u5B9A\\u6E90\\u6587\\u672C\"), mdx(Notice, {\n title: \"\\u6CE8\\u610F\\u4E8B\\u9879\",\n mdxType: \"Notice\"\n }, \"Highlight \\u7EC4\\u4EF6\\u4F1A\\u5C06\\u6587\\u672C\\u88AB\\u62C6\\u5206\\u6210\\u591A\\u4E2A\\u72EC\\u7ACB\\u7684\\u884C\\u5185\\u5143\\u7D20\\uFF0C\\u4EFB\\u4F55\\u5206\\u5272\\u6587\\u672C\\u6D41\\u7684 CSS \\u5E03\\u5C40\\uFF08\\u5982 flex \\u5E03\\u5C40\\uFF09\\u53EF\\u80FD\\u4F1A\\u5C06\\u9AD8\\u4EAE\\u6587\\u672C\\u65AD\\u5F00\\uFF0C\\u4E3A\\u907F\\u514D\\u9AD8\\u4EAE\\u5185\\u5BB9\\u88AB\\u6D4F\\u89C8\\u5668\\u62C6\\u5206\\u5230\\u4E0D\\u540C\\u884C\\u6216\\u5217\\uFF0C\\u8BF7\\u6309\\u9700\\u4F7F\\u7528\\u5143\\u7D20\\u5305\\u88F9 Highlight \\u7EC4\\u4EF6\\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 React from 'react';\\nimport { Highlight } from '@douyinfe/semi-ui';\\n\\n() => {\\n const sourceString = '\\u4ECE Semi Design \\u5230 Any Design \\u5FEB\\u901F\\u5B9A\\u4E49\\u4F60\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u5E76\\u5E94\\u7528\\u5728\\u8BBE\\u8BA1\\u7A3F\\u548C\\u4EE3\\u7801\\u4E2D';\\n const searchWords = ['\\u8BBE\\u8BA1\\u7CFB\\u7EDF', 'Semi Design'];\\n \\n return (

\\n \\n

);\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u6307\\u5B9A\\u9AD8\\u4EAE\\u6837\\u5F0F\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\uFF0C\\u9AD8\\u4EAE\\u6587\\u672C\\u4F1A\\u81EA\\u5E26\\u6587\\u672C\\u6837\\u5F0F\\uFF0C\\u80CC\\u666F\\u989C\\u8272 --semi-yellow-4, \\u6587\\u672C\\u989C\\u8272\\u4E3A\\u9ED1\\u8272\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"\\u6697\\u8272\\u6A21\\u5F0F\\u4E0B\\uFF0C\\u80CC\\u666F\\u989C\\u8272\\u4E3A --semi-yellow-2\\uFF0C\\u6587\\u672C\\u989C\\u8272\\u4E3A\\u767D\\u8272\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"\\u5F53\\u4F60\\u9700\\u8981\\u81EA\\u5B9A\\u4E49\\u4E0D\\u540C\\u7684\\u9AD8\\u4EAE\\u6837\\u5F0F\\u65F6\\uFF0C\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"highlightClassName\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"highlightStyle\"), \"\\u6765\\u6307\\u5B9A \"), 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 React from 'react';\\nimport { Highlight } from '@douyinfe/semi-ui';\\n\\n() => {\\n const sourceString = '\\u4ECE Semi Design \\u5230 Any Design \\u5FEB\\u901F\\u5B9A\\u4E49\\u4F60\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u5E76\\u5E94\\u7528\\u5728\\u8BBE\\u8BA1\\u7A3F\\u548C\\u4EE3\\u7801\\u4E2D';\\n const searchWords = ['\\u8BBE\\u8BA1\\u7CFB\\u7EDF', 'Semi Design'];\\n \\n return (\\n <>\\n

\\n \\n

\\n

\\n \\n

\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u4E0D\\u540C\\u6587\\u672C\\u4F7F\\u7528\\u5DEE\\u5F02\\u5316\\u6837\\u5F0F\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"v2.71.0 \\u540E\\uFF0C\\u652F\\u6301\\u9488\\u5BF9\\u4E0D\\u540C\\u7684\\u9AD8\\u4EAE\\u6587\\u672C\\u4F7F\\u7528\\u4E0D\\u540C\\u7684\\u9AD8\\u4EAE\\u6837\\u5F0F\\nsearchWords \\u9ED8\\u8BA4\\u4E3A\\u5B57\\u7B26\\u4E32\\u6570\\u7EC4\\u3002\\u5F53\\u4F20\\u5165\\u5BF9\\u8C61\\u6570\\u7EC4\\u65F6\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 text\\u6307\\u5B9A\\u9AD8\\u4EAE\\u6587\\u672C\\uFF0C\\u540C\\u65F6\\u5355\\u72EC\\u6307\\u5B9A className\\u3001style\"), 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 React from 'react';\\nimport { Highlight } from '@douyinfe/semi-ui';\\n\\n() => {\\n return (\\n

\\n \\n

\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u6307\\u5B9A\\u9AD8\\u4EAE\\u6807\\u7B7E\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Semi \\u9ED8\\u8BA4\\u4F1A\\u5C06 sourceString \\u4E2D\\u4E0E searchWords \\u5339\\u914D\\u7684\\u6587\\u672C\\u7528 mark \\u6807\\u7B7E\\u5305\\u88F9\\uFF0C\\u4F60\\u4E5F\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"component\"), \" \\u91CD\\u65B0\\u6307\\u5B9A\\u6807\\u7B7E\"), 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 React from 'react';\\nimport { Highlight } from '@douyinfe/semi-ui';\\n\\n() => {\\n const sourceString = '\\u4ECE Semi Design \\u5230 Any Design \\u5FEB\\u901F\\u5B9A\\u4E49\\u4F60\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\uFF0C\\u5E76\\u5E94\\u7528\\u5728\\u8BBE\\u8BA1\\u7A3F\\u548C\\u4EE3\\u7801\\u4E2D';\\n const searchWords = ['\\u8BBE\\u8BA1\\u7CFB\\u7EDF', 'Semi Design'];\\n \\n return (

\\n \\n

);\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"API \\u53C2\\u8003\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Highlight\"), 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 }, \"searchWords\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u671F\\u671B\\u9AD8\\u4EAE\\u663E\\u793A\\u7684\\u6587\\u672C\\uFF08\\u5BF9\\u8C61\\u6570\\u7EC4\\u5728v2.71\\u540E\\u652F\\u6301\\uFF09\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string[]\", \"|\", \"object[]\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"[]\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"sourceString\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u6E90\\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 }, \"component\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9AD8\\u4EAE\\u6807\\u7B7E\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"mark\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"highlightClassName\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9AD8\\u4EAE\\u6807\\u7B7E\\u7684\\u6837\\u5F0F\\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 }, \"highlightStyle\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u9AD8\\u4EAE\\u6807\\u7B7E\\u7684\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CSSProperties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"caseSensitive\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u662F\\u5426\\u5927\\u5C0F\\u5199\\u654F\\u611F\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"autoEscape\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u662F\\u5426\\u81EA\\u52A8\\u8F6C\\u4E49\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"true\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"))))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/show/highlight","next":{"fields":{"slug":"en-US/show/image"},"id":"77bcd230-cd90-5620-aee6-b322ddb4baaf","frontmatter":{"title":"Image","localeCode":"en-US","icon":"doc-image","showNew":null}},"previous":{"fields":{"slug":"en-US/show/highlight"},"id":"d23f500e-1472-5cd5-8702-d567aecb4ca6","frontmatter":{"title":"Highlight","localeCode":"en-US","icon":"doc-highlight","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}