Highlight

纯展示文本高亮：在 sourceString 中标记 searchWords，命中片段默认用 <mark> 包裹。纯文本输出（HTML 会被转义而非解析），支持大小写敏感、正则转义开关、自定义包裹元素/类名/样式，以及对象数组差异化样式（不同关键词单独 className/style）。

如何引入

import { Highlight } from '@chenzy-design/svelte';

通过 searchWords 指定需要高亮的关键字，通过 sourceString 指定源文本。匹配到的文字默认用 <mark> 包裹高亮。

默认高亮背景为 yellow-4、文字黑色（暗色为 yellow-2 + 白字）。通过 highlightClassName、highlightStyle 自定义高亮样式。

searchWords 传入对象数组时，可通过 text 指定高亮文本，同时为每个关键词单独指定 className、style。

默认将命中文本用 mark 标签包裹，可通过 component 重新指定标签（如 strong）。

searchWords 支持字符串数组，同时高亮多个关键词。

Svelte 是一个前端框架，它在构建时将组件编译成原生 JavaScript，无需运行时框架开销。

默认忽略大小写，设置 caseSensitive 开启大小写严格匹配。

大小写不敏感（默认）：
Hello World, hello svelte

大小写敏感：
Hello World, hello svelte

属性	说明	类型	默认值
`sourceString`	待处理原始文本（纯文本，HTML 被转义）	`string`	''
`searchWords`	需高亮关键词；字符串/字符串数组，或对象数组 { text, className, style } 差异化样式（Semi v2.71+）；空文本忽略	`string \| string[] \| HighlightWord \| HighlightWord[]`	[]
`caseSensitive`	是否大小写敏感	`boolean`	false
`autoEscape`	是否对关键词正则转义；关闭后 searchWords 视为正则源	`boolean`	true
`component`	高亮片段包裹标签名	`string`	'mark'
`highlightClassName`	追加到每个高亮片段的类名	`string`	''
`highlightStyle`	追加到每个高亮片段的内联样式	`string`	''

变量	默认值	用法
`--cd-color-highlight`	`#000000`	highlight · 颜色
`--cd-color-highlight-bg`	`#fbda32`	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