60 lines
2.0 KiB
Markdown
60 lines
2.0 KiB
Markdown
# Highlight
|
|
[](https://www.npmjs.com/package/@tiptap/extension-highlight)
|
|
[](https://npmcharts.com/compare/@tiptap/extension-highlight?minimal=true)
|
|
|
|
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.
|
|
|
|
Type `==two equal signs==` and it will magically transform to <mark>highlighted</mark> text while you type.
|
|
|
|
## Installation
|
|
```bash
|
|
# with npm
|
|
npm install @tiptap/extension-highlight
|
|
|
|
# with Yarn
|
|
yarn add @tiptap/extension-highlight
|
|
```
|
|
|
|
## Settings
|
|
| 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. |
|
|
|
|
## Commands
|
|
|
|
### setHighlight()
|
|
Mark text as highlighted.
|
|
|
|
```js
|
|
editor.commands.setHighlight()
|
|
editor.commands.setHighlight({ color: '#ffcc00' })
|
|
```
|
|
|
|
### toggleHighlight()
|
|
Toggle a text highlight.
|
|
|
|
```js
|
|
editor.commands.toggleHighlight()
|
|
editor.commands.toggleHighlight({ color: '#ffcc00' })
|
|
```
|
|
|
|
### unsetHighlight()
|
|
Removes the highlight.
|
|
|
|
```js
|
|
editor.commands. unsetHighlight()
|
|
```
|
|
|
|
|
|
## Keyboard shortcuts
|
|
| Command | Windows/Linux | macOS |
|
|
| ----------------- | ------------------------------- | --------------------------- |
|
|
| toggleHighlight() | `Control` `Shift` `H` | `Cmd` `Shift` `H` |
|
|
|
|
## Source code
|
|
[packages/extension-highlight/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-highlight/)
|
|
|
|
## Usage
|
|
<tiptap-demo name="Marks/Highlight"></tiptap-demo>
|