Search

Highlight

VersionDownloads

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

OptionTypeDefaultDescription
multicolorBooleanfalseAdd support for multiple colors.
HTMLAttributesObject{}Custom HTML attributes that should be added to the rendered HTML tag.

Commands

CommandOptionsDescription
setHighlightcolor (optional)Mark text as highlighted.
toggleHighlightcolor (optional)Toggle a text highlight.
unsetHighlightRemoves the highlight.

Keyboard shortcuts

  • Windows/Linux: Control Shift H
  • macOS: Cmd Shift H

Source code

packages/extension-highlight/

Usage