Highlight

Demos

How to import

<script setup lang="ts">
    import { Highlight } from '@fibrous/semi-ui-vue';
</script>

Basic usage

You can specify keywords to be highlighted with searchWords and source text with sourceString

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

Code

<script setup lang="ts">
    import { Highlight } from '@fibrous/semi-ui-vue';

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

<template>
    <h2>
        <Highlight :searchWords="searchWords" :sourceString="sourceString" />
    </h2>
</template>

Specify highlight style

By default, the highlighted text will have its own text style, the text color is black, and the background color is --semi-yellow-4.
In dark mode, the text color is white, and the background color is --semi-yellow-2.
When you need to customize different highlight styles, you can specify them through highlightClassName, highlightStyle

Vue adds no px to numeric styles: write lengths as strings such as '4px' in highlightStyle and in a search word's style. Unitless properties such as fontWeight: 600 still work.

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

Code

<script setup lang="ts">
    import { Highlight } from '@fibrous/semi-ui-vue';

    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>

<template>
    <h2>
        <Highlight :highlightStyle="tealStyle" :searchWords="searchWords" :sourceString="sourceString" />
    </h2>
    <h2>
        <Highlight :highlightStyle="primaryStyle" :searchWords="searchWords" :sourceString="sourceString" />
    </h2>
</template>

Use Different Styles for Different Texts

It supports using different highlight styles for different highlighted texts. The searchWords is a string array by default. When an array of objects is passed in, the highlighted text can be specified through text, and the className and style can be specified separately at the same time.

In Vue the class field of an object item is class, as in templates.

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

Code

<script setup lang="ts">
    import { Highlight } from '@fibrous/semi-ui-vue';

    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>

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

Specify the highlight tag

Semi will wrap the text matching searchWords in sourceString with mark tag by default, you can also re-specify the tag through component

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

Code

<script setup lang="ts">
    import { Highlight } from '@fibrous/semi-ui-vue';

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

<template>
    <h2>
        <Highlight component="strong" :searchWords="searchWords" :sourceString="sourceString" />
    </h2>
</template>

API Reference

Props

Property	Description	Type	Default
autoEscape	Whether to escape regular expression characters in searchWords.	`boolean`	`semiDefault("Highlight", "autoEscape", true)`
caseSensitive	Whether matching is case sensitive.	`boolean`	`semiDefault("Highlight", "caseSensitive", false)`
sourceString	Source text.	`string`	`semiDefault("Highlight", "sourceString", "")`
searchWords	Text to highlight: a string, a string array, or an array of objects with text, class and style.	`string \| SearchWords`	`semiDefault("Highlight", "searchWords", [])`
highlightStyle	Inline style of the highlight tag. Vue adds no px to numbers, so write lengths as strings.	`CSSProperties`	`semiGlobalDefault("Highlight", "highlightStyle")`
highlightClassName	Class name of the highlight tag.	`string`	`semiGlobalDefault("Highlight", "highlightClassName")`
component	Tag name of the highlight element.	`string`	`semiDefault("Highlight", "component", "mark")`

Events

Event	Description	Callback parameters
None

Slots

Slot	Description	Scope parameters
None

Exposes

Name	Description	Type
None

Highlight has no root element and renders a Fragment: attrs such as class, style and id have nowhere to land and are dropped without a warning, and there is no usable ref.