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

​
Installation

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:

Build docs developers (and LLMs) love

Get started for freeTalk to us