Highlight

Intro

Highlight the specified text content.

Install

import PressHighlight from 'press-ui/press-highlight/press-highlight.vue';

export default {
  components: {
    PressHighlight,
  }
}

Usage

Basic Usage

You can specify keywords to be highlighted with keywords and source text with source-string.

<press-highlight :keywords="keywords" :source-string="text" />

export default {
  setup() {
    const text =
      'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.';
    const keywords = 'questions';

    return {
      text,
      keywords,
    };
  },
};

Multiple Keywords

If you need to specific more than one keywords, you can pass in keywords as an array.

<press-highlight :keywords="keywords" :source-string="text" />

export default {
  setup() {
    const text =
      'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.';
    const keywords = ['time', 'life', 'answer'];

    return {
      text,
      keywords,
    };
  },
};

Custom Class

Set the highlight-class of the highlighted tag to customize the style.

<press-highlight
  :keywords="keywords"
  :source-string="text"
  highlight-class="custom-class"
/>

export default {
  setup() {
    const text =
      'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.';
    const keywords = 'life';

    return {
      text,
      keywords,
    };
  },
};

.custom-class {
  color: red;
}

API

Props

Attribute	Description	Type	Default
auto-escape	Whether to automatically escape	boolean	true
case-sensitive	Is case sensitive	boolean	false
highlight-class	Class name of the highlight element	string	-
highlight-tag	HTML Tag of highlighted element	string	span
keywords	Expected highlighted text	string | string[]	-
source-string	Source text	string	-
tag	HTML Tag of root element	string	div
unhighlight-class	Class name of the unhighlight element	string	-
unhighlight-tag	HTML Tag of unhighlight element	string	span

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles.

Name	Default Value	Description
--press-highlight-tag-color	var(--press-primary-color)	Color of highlighted text