{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/show/highlight","result":{"data":{"current":{"frontmatter":{"title":"Highlight","order":72,"brief":"highlight specific content","icon":"doc-highlight"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#code-demo","title":"code demo","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic usage"},{"url":"#specify-highlight-style","title":"Specify highlight style"},{"url":"#use-different-styles-for-different-texts","title":"Use Different Styles for Different Texts"},{"url":"#specify-the-highlight-tag","title":"Specify the highlight tag"}]},{"url":"#api-reference","title":"API Reference","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\": \"en-US\",\n  \"order\": 72,\n  \"category\": \"Show\",\n  \"title\": \"Highlight\",\n  \"icon\": \"doc-highlight\",\n  \"dir\": \"column\",\n  \"noInline\": true,\n  \"brief\": \"highlight specific content\"\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  }, \"code demo\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"How to import\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi support \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Highlight\"), \" component since v2.24.0\"), 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  }, \"Basic usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can specify keywords to be highlighted with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"searchWords\"), \" and source text with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"sourceString\")), mdx(Notice, {\n    title: \"Attension\",\n    mdxType: \"Notice\"\n  }, \"The Highlight component will split the text into multiple independent inline elements. Any CSS layout that splits the text flow (such as flex layout) may break the highlighted text. To prevent the highlighted content from being split into different rows or columns by the browser, please wrap the Highlight component with a wrapper element as needed.\"), 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 = 'From Semi Design\\uFF0CTo Any Design. Quickly define your design system and apply it to design drafts and code';\\n    const searchWords = ['Any Design', 'Semi Design'];\\n    \\n    return (<h2>\\n        <Highlight sourceString={sourceString} searchWords={searchWords} />\\n    </h2>);\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Specify highlight style\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"By default, the highlighted text will have its own text style, the text color is black, and the background color is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"--semi-yellow-4\"), \".\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"In dark mode, the text color is white, and the background color is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"--semi-yellow-2\"), \".\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"When you need to customize different highlight styles, you can specify them through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"highlightClassName\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"highlightStyle\")), 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 = 'From Semi Design\\uFF0CTo Any Design. Quickly define your design system and apply it to design drafts and code';\\n    const searchWords = ['Any Design', 'Semi Design'];\\n    \\n    return (<h2>\\n        <Highlight\\n            sourceString={sourceString}\\n            searchWords={searchWords}\\n            highlightStyle={{\\n                borderRadius: 6,\\n                marginLeft: 4,\\n                marginRight: 4,\\n                paddingLeft: 4,\\n                paddingRight: 4,\\n                backgroundColor: 'rgba(var(--semi-teal-5), 1)',\\n                color: 'rgba(var(--semi-white), 1)'\\n            }}\\n        />\\n    </h2>);\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Use Different Styles for Different Texts\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"After v2.71.0, it supports using different highlight styles for different highlighted texts.\\nThe \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"searchWords\"), \" is a string array by default. When an array of objects is passed in, the highlighted text can be specified through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"text\"), \", and the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"className\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"style\"), \" can be specified separately at the same time. \"), 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        <h2>\\n            <Highlight\\n                component='span'\\n                sourceString='From Semi Design\\uFF0CTo Any Design. Quickly define your design system and apply it to design drafts and code'\\n                searchWords={[\\n                    { text: 'Semi', style: { backgroundColor: 'rgba(var(--semi-teal-5), 1)', color: 'rgba(var(--semi-white), 1)', padding: 4 }, className: 'keyword1' },\\n                    { text: 'Quickly', style: { backgroundColor: 'var(--semi-color-primary)', color: 'rgba(var(--semi-white), 1)', padding: 4 }, className: 'keyword2' },\\n                    { text: 'code', style: { backgroundColor: 'rgba(var(--semi-violet-5), 1)', color: 'rgba(var(--semi-white), 1)', padding: 4 }, className: 'keyword3' },\\n                ]}\\n                highlightStyle={{ borderRadius: 4 }}\\n            />\\n        </h2>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Specify the highlight tag\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Semi will wrap the text matching searchWords in sourceString with mark tag by default, you can also re-specify the tag through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"component\")), 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 = 'From Semi Design\\uFF0CTo Any Design. Quickly define your design system and apply it to design drafts and code';\\n    const searchWords = ['Any Design', 'Semi Design'];\\n    \\n    return (<h2>\\n        <Highlight\\n            sourceString={sourceString}\\n            searchWords={searchWords}\\n            component='strong'\\n        />\\n    </h2>);\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API Reference\"), 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  }, \"property\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"description\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"default value\"))), 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  }, \"expected highlighted text\"), 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  }, \"sourceString\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"source text\"), 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  }, \"Highlight label\"), 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  }, \"The style class name of the highlight tag\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), 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  }, \"Inline style for highlight tags\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), 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  }, \"Is case sensitive\"), 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  }, \"Whether to automatically escape\"), 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":"en-US/show/highlight","next":{"fields":{"slug":"zh-CN/show/highlight"},"id":"da7ce3f8-e107-5f64-8b4f-e5116e9becbc","frontmatter":{"title":"Highlight 高亮文本","localeCode":"zh-CN","icon":"doc-highlight","showNew":null}},"previous":{"fields":{"slug":"zh-CN/show/empty"},"id":"11d29e43-43c5-578f-a483-54ad2461ea01","frontmatter":{"title":"Empty 空状态","localeCode":"zh-CN","icon":"doc-empty","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}