import React from 'react'; import { Highlight } from '@douyinfe/semi-ui'; () => { const sourceString = 'From Semi Design，To Any Design. Quickly define your design system and apply it to design drafts and code'; const searchWords = ['Any Design', 'Semi Design']; return (<h2> <Highlight sourceString={sourceString} searchWords={searchWords} /> </h2>); };

import React from 'react'; import { Highlight } from '@douyinfe/semi-ui'; () => { const sourceString = 'From Semi Design，To Any Design. Quickly define your design system and apply it to design drafts and code'; const searchWords = ['Any Design', 'Semi Design']; return (<h2> <Highlight sourceString={sourceString} searchWords={searchWords} highlightStyle={{ borderRadius: 6, marginLeft: 4, marginRight: 4, paddingLeft: 4, paddingRight: 4, backgroundColor: 'rgba(var(--semi-teal-5), 1)', color: 'rgba(var(--semi-white), 1)' }} /> </h2>); };

import React from 'react'; import { Highlight } from '@douyinfe/semi-ui'; () => { return ( <h2> <Highlight component='span' sourceString='From Semi Design，To Any Design. Quickly define your design system and apply it to design drafts and code' searchWords={[ { text: 'Semi', style: { backgroundColor: 'rgba(var(--semi-teal-5), 1)', color: 'rgba(var(--semi-white), 1)', padding: 4 }, className: 'keyword1' }, { text: 'Quickly', style: { backgroundColor: 'var(--semi-color-primary)', color: 'rgba(var(--semi-white), 1)', padding: 4 }, className: 'keyword2' }, { text: 'code', style: { backgroundColor: 'rgba(var(--semi-violet-5), 1)', color: 'rgba(var(--semi-white), 1)', padding: 4 }, className: 'keyword3' }, ]} highlightStyle={{ borderRadius: 4 }} /> </h2> ); };

import React from 'react'; import { Highlight } from '@douyinfe/semi-ui'; () => { const sourceString = 'From Semi Design，To Any Design. Quickly define your design system and apply it to design drafts and code'; const searchWords = ['Any Design', 'Semi Design']; return (<h2> <Highlight sourceString={sourceString} searchWords={searchWords} component='strong' /> </h2>); };