2020-10-02 21:28:00 +08:00
# Highlight
2021-01-25 17:35:52 +08:00
[](https://www.npmjs.com/package/@tiptap/extension-highlight)
[](https://npmcharts.com/compare/@tiptap/extension-highlight?minimal=true)
2020-10-08 20:54:25 +08:00
Use this extension to render highlighted text with `<mark>` . You can use only default `<mark>` HTML tag, which has a yellow background color by default, or apply different colors.
2020-10-02 21:28:00 +08:00
2020-10-28 05:22:34 +08:00
Type `==two equal signs==` and it will magically transform to < mark > highlighted</ mark > text while you type.
2020-10-02 21:28:00 +08:00
## Installation
```bash
2020-11-06 22:31:29 +08:00
# with npm
2020-10-02 21:28:00 +08:00
npm install @tiptap/extension -highlight
2020-11-06 22:31:29 +08:00
# with Yarn
2020-10-02 21:28:00 +08:00
yarn add @tiptap/extension -highlight
```
## Settings
2020-12-04 06:32:11 +08:00
| Option | Type | Default | Description |
| -------------- | --------- | ------- | --------------------------------------------------------------------- |
| multicolor | `Boolean` | `false` | Add support for multiple colors. |
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
2020-10-02 21:28:00 +08:00
## Commands
2020-12-04 00:05:22 +08:00
| Command | Options | Description |
| --------------- | ------------------ | ------------------------- |
| setHighlight | `color` (optional) | Mark text as highlighted. |
| toggleHighlight | `color` (optional) | Toggle a text highlight. |
| unsetHighlight | — | Removes the highlight. |
2020-10-02 21:28:00 +08:00
## Keyboard shortcuts
2020-11-19 08:16:10 +08:00
* Windows/Linux: `Control` `Shift` `H`
* macOS: `Cmd` `Shift` `H`
2020-10-02 21:28:00 +08:00
## Source code
2021-04-21 21:31:11 +08:00
[packages/extension-highlight/ ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-highlight/ )
2020-10-02 21:28:00 +08:00
## Usage
2021-08-26 05:10:20 +08:00
< tiptap-demo name = "Marks/Highlight" > < / tiptap-demo >
