---
title: "Highlight extension"
description: "Use the Highlight extension in your Tiptap Editor to add colorful text highlights. Learn more in our docs!"
canonical_url: "https://tiptap.dev/docs/editor/extensions/marks/highlight"
---

# Highlight extension

Use the Highlight extension in your Tiptap Editor to add colorful text highlights. Learn more in our docs!

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.

> **Interactive demo:** [Highlight](https://embed.tiptap.dev/preview/Marks/Highlight)

## Install

```bash
npm install @tiptap/extension-highlight
```

## Settings

### HTMLAttributes

Custom HTML attributes that should be added to the rendered HTML tag.

```js
Highlight.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})
```

### multicolor

Add support for multiple colors.

Default: `false`

```js
Highlight.configure({
  multicolor: true,
})
```

## Commands

### setHighlight()

Mark text as highlighted.

```js
editor.commands.setHighlight()
editor.commands.setHighlight({ color: '#ffcc00' })
```

### toggleHighlight()

Toggle a text highlight.

```js
editor.commands.toggleHighlight()
editor.commands.toggleHighlight({ color: '#ffcc00' })
```

### unsetHighlight()

Removes the highlight.

```js
editor.commands.unsetHighlight()
```

## Keyboard shortcuts

| Command           | Windows/Linux       | macOS           |
| ----------------- | ------------------- | --------------- |
| toggleHighlight() | Control + Shift + H | Cmd + Shift + H |

## Source code

[packages/extension-highlight/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-highlight/)