代码演示
如何引入
import { Highlight } from '@chenzy-design/svelte';基本用法
你可以通过 searchWords 指定需要高亮的关键字，通过 sourceString 指定源文本。
注意事项
Highlight 组件会将文本拆分成多个独立的行内元素，任何分割文本流的 CSS 布局（如 flex 布局）可能会将高亮文本断开，为避免高亮内容被浏览器拆分到不同行或列，请按需使用元素包裹 Highlight 组件。
从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中
指定高亮样式
默认情况下，高亮文本会自带文本样式，背景颜色 —cd-color-yellow-4，文本颜色为黑色。
暗色模式下，背景颜色为 —cd-color-yellow-2，文本颜色为白色。
当你需要自定义不同的高亮样式时，你可以通过 highlightClassName、highlightStyle 来指定。
从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中
从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中
不同文本使用差异化样式
支持针对不同的高亮文本使用不同的高亮样式。searchWords 默认为字符串数组，当传入对象数组时，可以通过 text 指定高亮文本，同时单独指定 className、style。
从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中
指定高亮标签
默认会将 sourceString 中与 searchWords 匹配的文本用 mark 标签包裹，你也可以通过 component 重新指定标签。
从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中
API 参考
Highlight
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| searchWords | 期望高亮显示的文本（对象数组支持差异化样式） | string | string[] | object[] | [] |
| sourceString | 源文本 | string | - |
| component | 高亮标签 | string | mark |
| highlightClassName | 高亮标签的样式类名 | string | - |
| highlightStyle | 高亮标签的内联样式 | string | - |
| caseSensitive | 是否大小写敏感 | boolean | false |
| autoEscape | 是否自动转义 | boolean | true |
设计变量
变量 | 默认值 | 用法 |
|---|---|---|
| --cd-color-highlight | var(--cd-color-black) | highlight · 颜色 |
| --cd-color-highlight-bg | var(--cd-color-yellow-4) | highlight · 颜色背景色 |
| --cd-highlight-bg | var(--cd-color-highlight-bg) | 命中片段背景色（Semi $color-highlight-text-bg-default）：亮 yellow-4 / 暗 yellow-2 |
| --cd-highlight-color | var(--cd-color-highlight) | 命中片段文字色（Semi $color-highlight-text-default）：亮 black / 暗 white |
显示第 1 条-第 4 条，共 4 条
- 1