tiptap/docs/api/marks/highlight.md

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

Source code

packages/extension-highlight/

Usage

https://embed.tiptap.dev/preview/Marks/Highlight