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

# 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.

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/

2.0 KiB Raw Blame History