1.9 KiB
1.9 KiB
description, icon
| description | icon |
|---|---|
| Make it look nerdier with some colorful text highlights. | mark-pen-line |
Highlight
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 highlighted text while you type.
Installation
npm install @tiptap/extension-highlight
Settings
HTMLAttributes
Custom HTML attributes that should be added to the rendered HTML tag.
Highlight.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
multicolor
Add support for multiple colors.
Default: false
Highlight.configure({
multicolor: true,
})
Commands
setHighlight()
Mark text as highlighted.
editor.commands.setHighlight()
editor.commands.setHighlight({ color: '#ffcc00' })
toggleHighlight()
Toggle a text highlight.
editor.commands.toggleHighlight()
editor.commands.toggleHighlight({ color: '#ffcc00' })
unsetHighlight()
Removes the highlight.
editor.commands. unsetHighlight()
Keyboard shortcuts
| Command | Windows/Linux | macOS |
|---|---|---|
| toggleHighlight() | Control Shift H |
Cmd Shift H |