> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/ueberdosis/tiptap/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<CodeGroup>
  ```bash npm theme={null}
  npm install @tiptap/extension-highlight
  ```

  ```bash yarn theme={null}
  yarn add @tiptap/extension-highlight
  ```

  ```bash pnpm theme={null}
  pnpm add @tiptap/extension-highlight
  ```
</CodeGroup>

## Usage

```typescript theme={null}
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

<ParamField path="multicolor" type="boolean" default="false">
  Allow multiple highlight colors. When enabled, you can specify custom colors for highlights.

  ```typescript theme={null}
  Highlight.configure({
    multicolor: true,
  })
  ```
</ParamField>

<ParamField path="HTMLAttributes" type="Record<string, any>" default="{}">
  HTML attributes to add to the highlight element.

  ```typescript theme={null}
  Highlight.configure({
    HTMLAttributes: {
      class: 'my-highlight-class',
    },
  })
  ```
</ParamField>

## Commands

### setHighlight(attributes?)

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

```typescript theme={null}
// Without multicolor
editor.commands.setHighlight()

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

### toggleHighlight(attributes?)

Toggle the highlight mark on the current selection.

```typescript theme={null}
// Without multicolor
editor.commands.toggleHighlight()

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

### unsetHighlight()

Remove the highlight mark from the current selection.

```typescript theme={null}
editor.commands.unsetHighlight()
```

## Using Multiple Colors

To use multiple highlight colors, enable the `multicolor` option:

```typescript theme={null}
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](https://github.com/ueberdosis/tiptap/tree/main/packages/extension-highlight)