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

#Source code

packages/extension-highlight/

#Usage