Show · Highlight
Highlight
highlight specific content
code demo
How to import
Semi support
Highlight
component since v2.24.0Basic usage
You can specify keywords to be highlighted with
searchWords
and source text with sourceString
Specify highlight style
By default, the highlighted text will have its own text style, the text color is black, and the background color is
In dark mode, the text color is white, and the background color is
When you need to customize different highlight styles, you can specify them through
--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
Use Different Styles for Different Texts
After v2.71.0, 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. 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
API Reference
Highlight
property | description | type | default value |
---|---|---|---|
searchWords | expected highlighted text | string[] | '' |
sourceString | source text | string | |
component | Highlight label | string | mark |
highlightClassName | The style class name of the highlight tag | ReactNode | - |
highlightStyle | Inline style for highlight tags | ReactNode | - |
caseSensitive | Is case sensitive | false | - |
autoEscape | Whether to automatically escape | true | - |