高亮文本 Highlight - Svelte

代码演示

如何引入

<script lang="ts">
    import { Highlight } from '@fibrae/semi-ui-svelte';
</script>

基本用法

你可以通过 searchWords 指定需要高亮的关键字，通过 sourceString 指定源文本

从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中

代码

<script lang="ts">
    import { Highlight } from '@fibrae/semi-ui-svelte';

    const sourceString = '从 Semi Design 到 Any Design  快速定义你的设计系统，并应用在设计稿和代码中';
    const searchWords = ['设计系统', 'Semi Design'];
</script>

<h2>
    <Highlight {searchWords} {sourceString} />
</h2>

指定高亮样式

默认情况下，高亮文本会自带文本样式，背景颜色 --semi-yellow-4, 文本颜色为黑色
暗色模式下，背景颜色为 --semi-yellow-2，文本颜色为白色
当你需要自定义不同的高亮样式时，你可以通过 highlightClassName, highlightStyle来指定

highlightStyle 与高亮词的 style 是样式对象，键可用驼峰或 kebab-case；数值不会补 px，长度要写成 '4px' 这样的字符串，fontWeight: 600 等无单位属性不受影响。

从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中

代码

<script lang="ts">
    import { Highlight } from '@fibrae/semi-ui-svelte';

    const sourceString = '从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中';
    const searchWords = ['设计系统', 'Semi Design'];

    const baseStyle = {
        borderRadius: '6px',
        marginLeft: '4px',
        marginRight: '4px',
        paddingLeft: '4px',
        paddingRight: '4px',
        color: 'var(--semi-white)',
    };
    const tealStyle = { ...baseStyle, backgroundColor: 'var(--semi-teal-7)' };
    const primaryStyle = { ...baseStyle, backgroundColor: 'var(--semi-color-primary)' };
</script>

<h2>
    <Highlight highlightStyle={tealStyle} {searchWords} {sourceString} />
</h2>
<h2>
    <Highlight highlightStyle={primaryStyle} {searchWords} {sourceString} />
</h2>

不同文本使用差异化样式

支持针对不同的高亮文本使用不同的高亮样式 searchWords 默认为字符串数组。当传入对象数组时，可以通过 text指定高亮文本，同时单独指定 className、style

对象项的类名字段写作 class，与 Svelte 模板里的写法一致。

从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中

代码

<script lang="ts">
    import { Highlight } from '@fibrae/semi-ui-svelte';

    const sourceString = '从 Semi Design 到 Any Design  快速定义你的设计系统，并应用在设计稿和代码中';
    const searchWords = [
        {
            text: 'Semi',
            style: { backgroundColor: 'var(--semi-teal-7)', color: 'var(--semi-white)', padding: '4px' },
            class: 'keyword1',
        },
        {
            text: '设计系统',
            style: { backgroundColor: 'var(--semi-color-primary)', color: 'var(--semi-white)', padding: '4px' },
            class: 'keyword2',
        },
        {
            text: '设计稿和代码',
            style: { backgroundColor: 'var(--semi-violet-5)', color: 'var(--semi-white)', padding: '4px' },
            class: 'keyword3',
        },
    ];
</script>

<h2>
    <Highlight component="span" highlightStyle={{ borderRadius: '4px' }} {searchWords} {sourceString} />
</h2>

指定高亮标签

Semi 默认会将 sourceString 中与 searchWords 匹配的文本用 mark 标签包裹，你也可以通过 component 重新指定标签

从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中

代码

<script lang="ts">
    import { Highlight } from '@fibrae/semi-ui-svelte';

    const sourceString = '从 Semi Design 到 Any Design  快速定义你的设计系统，并应用在设计稿和代码中';
    const searchWords = ['设计系统', 'Semi Design'];
</script>

<h2>
    <Highlight component="strong" {searchWords} {sourceString} />
</h2>

API 参考

Highlight

Props

属性	说明	类型	默认值
autoEscape	是否自动转义 searchWords 中的正则特殊字符。	`boolean`	`true`
caseSensitive	是否区分大小写。	`boolean`	`false`
component	高亮标签名。	`string`	`"mark"`
highlightClassName	高亮标签的类名。	`string`	-
highlightStyle	高亮标签的样式对象，键可用驼峰或 kebab-case；数值不补 px，长度要写成字符串。	`HighlightStyle`	-
searchWords	需要高亮的文本：字符串、字符串数组，或带 text、class、style 的对象数组。	`string \| SearchWords`	`[]`
sourceString	源文本。	`string`	`""`

Highlight 没有根元素，渲染的是若干行内片段：class、style、id 等未声明的属性无处可落，会被丢弃，也不能用 bind:this 取元素。