Highlight extension

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.

Install

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

Source code

packages/extension-highlight/