---
title: "高亮扩展"
description: "使用 Tiptap 编辑器中的高亮扩展来添加色彩丰富的文本高亮。了解更多内容请查看我们的文档！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/marks/highlight"
---

# 高亮扩展

使用 Tiptap 编辑器中的高亮扩展来添加色彩丰富的文本高亮。了解更多内容请查看我们的文档！

使用此扩展通过 `<mark>` 渲染高亮文本。您可以仅使用默认的 `<mark>` HTML 标签，该标签的默认背景颜色为黄色，或者应用不同的颜色。

输入 `==两个等号==`，它会在您输入时神奇地转换为 高亮 文本。

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

## 安装

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

## 设置

### HTMLAttributes

应添加到渲染的 HTML 标签中的自定义 HTML 属性。

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

### multicolor

添加对多种颜色的支持。

默认： `false`

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

## 命令

### setHighlight()

将文本标记为高亮。

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

### toggleHighlight()

切换文本高亮。

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

### unsetHighlight()

移除高亮。

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

## 快捷键

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

## 源代码

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