tiptap 高亮显示标记

使用此扩展来使用 <mark> 渲染高亮文本。你可以只使用默认的 <mark> HTML 标签，它默认有一个黄色背景，或者应用不同的颜色。

键入 ==two equal signs==，它会在你输入时神奇地变为 <mark>高亮显示</mark> 文本。

安装

npm install @tiptap/extension-highlight

设置

HTMLAttributes

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

Highlight.configure({
  HTMLAttributes: {
    class: "my-custom-class",
  },
});

multicolor

启用多色支持。

默认值：false

Highlight.configure({
  multicolor: true,
});

命令

setHighlight()

将文本标记为高亮。

editor.commands.setHighlight();
editor.commands.setHighlight({ color: "#ffcc00" });

toggleHighlight()

切换文本高亮。

editor.commands.toggleHighlight();
editor.commands.toggleHighlight({ color: "#ffcc00" });

unsetHighlight()

移除高亮。

editor.commands.unsetHighlight();

快捷键

源代码

packages/extension-highlight/

使用示例

嵌入演示 - 高亮显示