FeaturesMarks
Highlight
Highlight text with background color.
Type: Mark · Category: Marks
Highlight applies a background color to text, like a marker pen. Renders as <mark> in HTML output.
Demo
Installation
import { Highlight } from "@arkpad/extension-highlight";Commands
The extension registers three commands for managing text highlights:
// Toggles the default highlight color on and off
editor.runCommand("toggleHighlight");
// Toggles a specific highlight color on the selection
editor.runCommand("toggleHighlight", { color: "#38bdf8" });
// Explicitly sets a specific highlight color
editor.runCommand("setHighlight", { color: "#f472b6" });
// Explicitly removes highlighting from the selection
editor.runCommand("unsetHighlight");Chaining Commands
You can chain commands to apply a highlight and focus the editor:
editor.chain().focus().toggleHighlight({ color: "#4ade80" }).run();Keyboard Shortcuts
| Shortcut | Action |
|---|---|
Mod-Shift-h | Toggles default highlight styling |
Active State
Use active states with the color attribute to check highlighting:
// Check if any highlight is active
const isActive = editor.isActive("highlight");
// Check if a specific highlight color is active
const isYellow = editor.isActive("highlight", { color: "#ffff00" });Configuration
Options
| Name | Type | Default | Description |
|---|---|---|---|
color | string | "#ffff00" | The default highlight color used when no color is explicitly passed to commands. |
HTMLAttributes | Record<string, any> | {} | Key-value pairs of attributes to render on the <mark> DOM element. |
Highlight.configure({
color: "#fde047", // Custom default yellow color
HTMLAttributes: {
class: "custom-mark-styling",
},
});