Highlight

Highlight text with background colors.

The Highlight extension allows you to highlight text with background colors. Text is rendered as a <mark> HTML element by default.

Installation

npm

npm install @tiptap/extension-highlight

Usage

import { Editor } from '@tiptap/core'
import Highlight from '@tiptap/extension-highlight'

const editor = new Editor({
  extensions: [
    Highlight,
  ],
})

Keyboard Shortcuts

• Mod-Shift-h - Toggle highlight formatting

Markdown Support

The extension supports markdown syntax for highlighted text:

• Type ==text== to create highlighted text

Configuration Options

multicolor · boolean · default: "false"

Allow multiple highlight colors. When enabled, you can specify custom colors for highlights.

Highlight.configure({
  multicolor: true,
})

HTMLAttributes · Record<string, any> · default: "{}"

HTML attributes to add to the highlight element.

Highlight.configure({
  HTMLAttributes: {
    class: 'my-highlight-class',
  },
})

Commands

setHighlight(attributes?)

Set a highlight mark on the current selection. When multicolor is enabled, you can specify a color.

// Without multicolor
editor.commands.setHighlight()

// With multicolor enabled
editor.commands.setHighlight({ color: '#ffc078' })

toggleHighlight(attributes?)

Toggle the highlight mark on the current selection.

// Without multicolor
editor.commands.toggleHighlight()

// With multicolor enabled
editor.commands.toggleHighlight({ color: '#ffc078' })

unsetHighlight()

Remove the highlight mark from the current selection.

editor.commands.unsetHighlight()

Using Multiple Colors

To use multiple highlight colors, enable the multicolor option:

import { Editor } from '@tiptap/core'
import Highlight from '@tiptap/extension-highlight'

const editor = new Editor({
  extensions: [
    Highlight.configure({
      multicolor: true,
    }),
  ],
})

// Apply different colors
editor.commands.setHighlight({ color: '#ffc078' })
editor.commands.setHighlight({ color: '#8ce99a' })
editor.commands.setHighlight({ color: '#74c0fc' })

When multicolor is enabled, the color is stored as a data-color attribute and applied as an inline style.

Source Code

View the source code on GitHub:

• packages/extension-highlight