Highlight

Add marked inline text.

Basic Marks Highlight Leaf Mark Toolbar Button Find Replace Demo

Highlight applies the highlight leaf mark to selected text. It is the authoring mark; Find Replace uses a separate search highlight leaf for transient search results.

Loading…

Features

KEYS.highlight leaf mark.
Directional selection affinity.
HTML deserialization from mark.
<mark> rendering by default.
Registry HighlightLeaf for styled marked text.
Optional input rules through HighlightRules.

Kit Usage

Add Basic Marks

BasicMarksKit includes HighlightPlugin, HighlightLeaf, == and ≡ input rules, and a mod+shift+h shortcut.

'use client';
 
import {
  BoldRules,
  CodeRules,
  HighlightRules,
  ItalicRules,
  MarkComboRules,
  StrikethroughRules,
  SubscriptRules,
  SuperscriptRules,
  UnderlineRules,
} from '@platejs/basic-nodes';
import {
  BoldPlugin,
  CodePlugin,
  HighlightPlugin,
  ItalicPlugin,
  KbdPlugin,
  StrikethroughPlugin,
  SubscriptPlugin,
  SuperscriptPlugin,
  UnderlinePlugin,
} from '@platejs/basic-nodes/react';
 
import { CodeLeaf } from '@/components/ui/code-node';
import { HighlightLeaf } from '@/components/ui/highlight-node';
import { KbdLeaf } from '@/components/ui/kbd-node';
 
export const BasicMarksKit = [
  BoldPlugin.configure({
    inputRules: [
      BoldRules.markdown({ variant: '*' }),
      BoldRules.markdown({ variant: '_' }),
      MarkComboRules.markdown({ variant: 'boldItalic' }),
      MarkComboRules.markdown({ variant: 'boldUnderline' }),
      MarkComboRules.markdown({ variant: 'boldItalicUnderline' }),
      MarkComboRules.markdown({ variant: 'italicUnderline' }),
    ],
  }),
  ItalicPlugin.configure({
    inputRules: [
      ItalicRules.markdown({ variant: '*' }),
      ItalicRules.markdown({ variant: '_' }),
    ],
  }),
  UnderlinePlugin.configure({
    inputRules: [UnderlineRules.markdown()],
  }),
  CodePlugin.configure({
    inputRules: [CodeRules.markdown()],
    node: { component: CodeLeaf },
    shortcuts: { toggle: { keys: 'mod+e' } },
  }),
  StrikethroughPlugin.configure({
    inputRules: [StrikethroughRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+shift+x' } },
  }),
  SubscriptPlugin.configure({
    inputRules: [SubscriptRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+comma' } },
  }),
  SuperscriptPlugin.configure({
    inputRules: [SuperscriptRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+period' } },
  }),
  HighlightPlugin.configure({
    inputRules: [
      HighlightRules.markdown({ variant: '==' }),
      HighlightRules.markdown({ variant: '≡' }),
    ],
    node: { component: HighlightLeaf },
    shortcuts: { toggle: { keys: 'mod+shift+h' } },
  }),
  KbdPlugin.withComponent(KbdLeaf),
];

'use client';
 
import {
  BoldRules,
  CodeRules,
  HighlightRules,
  ItalicRules,
  MarkComboRules,
  StrikethroughRules,
  SubscriptRules,
  SuperscriptRules,
  UnderlineRules,
} from '@platejs/basic-nodes';
import {
  BoldPlugin,
  CodePlugin,
  HighlightPlugin,
  ItalicPlugin,
  KbdPlugin,
  StrikethroughPlugin,
  SubscriptPlugin,
  SuperscriptPlugin,
  UnderlinePlugin,
} from '@platejs/basic-nodes/react';
 
import { CodeLeaf } from '@/components/ui/code-node';
import { HighlightLeaf } from '@/components/ui/highlight-node';
import { KbdLeaf } from '@/components/ui/kbd-node';
 
export const BasicMarksKit = [
  BoldPlugin.configure({
    inputRules: [
      BoldRules.markdown({ variant: '*' }),
      BoldRules.markdown({ variant: '_' }),
      MarkComboRules.markdown({ variant: 'boldItalic' }),
      MarkComboRules.markdown({ variant: 'boldUnderline' }),
      MarkComboRules.markdown({ variant: 'boldItalicUnderline' }),
      MarkComboRules.markdown({ variant: 'italicUnderline' }),
    ],
  }),
  ItalicPlugin.configure({
    inputRules: [
      ItalicRules.markdown({ variant: '*' }),
      ItalicRules.markdown({ variant: '_' }),
    ],
  }),
  UnderlinePlugin.configure({
    inputRules: [UnderlineRules.markdown()],
  }),
  CodePlugin.configure({
    inputRules: [CodeRules.markdown()],
    node: { component: CodeLeaf },
    shortcuts: { toggle: { keys: 'mod+e' } },
  }),
  StrikethroughPlugin.configure({
    inputRules: [StrikethroughRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+shift+x' } },
  }),
  SubscriptPlugin.configure({
    inputRules: [SubscriptRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+comma' } },
  }),
  SuperscriptPlugin.configure({
    inputRules: [SuperscriptRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+period' } },
  }),
  HighlightPlugin.configure({
    inputRules: [
      HighlightRules.markdown({ variant: '==' }),
      HighlightRules.markdown({ variant: '≡' }),
    ],
    node: { component: HighlightLeaf },
    shortcuts: { toggle: { keys: 'mod+shift+h' } },
  }),
  KbdPlugin.withComponent(KbdLeaf),
];

import { createPlateEditor } from 'platejs/react';
 
import { BasicMarksKit } from '@/components/editor/plugins/basic-marks-kit';
 
export const editor = createPlateEditor({
  plugins: [...BasicMarksKit],
});

import { createPlateEditor } from 'platejs/react';
 
import { BasicMarksKit } from '@/components/editor/plugins/basic-marks-kit';
 
export const editor = createPlateEditor({
  plugins: [...BasicMarksKit],
});

Use MarkToolbarButton with KEYS.highlight.

import { HighlighterIcon } from 'lucide-react';
import { KEYS } from 'platejs';
 
import { MarkToolbarButton } from '@/components/ui/mark-toolbar-button';
 
export function HighlightToolbarButton() {
  return (
    <MarkToolbarButton nodeType={KEYS.highlight} tooltip="Highlight">
      <HighlighterIcon />
    </MarkToolbarButton>
  );
}

import { HighlighterIcon } from 'lucide-react';
import { KEYS } from 'platejs';
 
import { MarkToolbarButton } from '@/components/ui/mark-toolbar-button';
 
export function HighlightToolbarButton() {
  return (
    <MarkToolbarButton nodeType={KEYS.highlight} tooltip="Highlight">
      <HighlighterIcon />
    </MarkToolbarButton>
  );
}

Manual Usage

Install the mark package.

pnpm add @platejs/basic-nodes

pnpm add @platejs/basic-nodes

Add HighlightPlugin directly when you want the default <mark> render.

import { HighlightPlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
 
export const editor = createPlateEditor({
  plugins: [HighlightPlugin],
});

import { HighlightPlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
 
export const editor = createPlateEditor({
  plugins: [HighlightPlugin],
});

Configure the registry leaf, input rules, and shortcut when you want the same behavior as the kit.

import { HighlightRules } from '@platejs/basic-nodes';
import { HighlightPlugin } from '@platejs/basic-nodes/react';
 
import { HighlightLeaf } from '@/components/ui/highlight-node';
 
export const highlightPlugin = HighlightPlugin.configure({
  inputRules: [
    HighlightRules.markdown({ variant: '==' }),
    HighlightRules.markdown({ variant: '≡' }),
  ],
  node: { component: HighlightLeaf },
  shortcuts: { toggle: { keys: 'mod+shift+h' } },
});

import { HighlightRules } from '@platejs/basic-nodes';
import { HighlightPlugin } from '@platejs/basic-nodes/react';
 
import { HighlightLeaf } from '@/components/ui/highlight-node';
 
export const highlightPlugin = HighlightPlugin.configure({
  inputRules: [
    HighlightRules.markdown({ variant: '==' }),
    HighlightRules.markdown({ variant: '≡' }),
  ],
  node: { component: HighlightLeaf },
  shortcuts: { toggle: { keys: 'mod+shift+h' } },
});

Ownership

Surface	Owner	What It Does
`BaseHighlightPlugin`	`@platejs/basic-nodes`	Headless highlight mark, HTML parser, render tag, selection rule, and `toggle` transform.
`HighlightPlugin`	`@platejs/basic-nodes/react`	React wrapper for the headless highlight mark.
`HighlightRules.markdown`	`@platejs/basic-nodes`	Optional mark input rule factory.
`HighlightLeaf`	Registry UI	Styled client highlight leaf using `PlateLeaf`.
`HighlightLeafStatic`	Registry UI	Static rendering version using `SlateLeaf`.
`BasicMarksKit`	Registry	Adds `HighlightPlugin`, `HighlightLeaf`, two input-rule variants, and `mod+shift+h`.
`MarkToolbarButton`	Registry UI	Reads active mark state and calls the mark toggle hook.

The package owns the mark. The registry owns highlight color and toolbar placement.

Behavior

Behavior	Source
Mark key	`KEYS.highlight`
Leaf behavior	`node.isLeaf: true`
Toggle transform	`editor.tf.highlight.toggle()` calls `editor.tf.toggleMark(type)`.
Selection affinity	`directional`
HTML tags	`mark`
Render output	`mark`
Kit input rules	`==` and `≡` variants
Kit shortcut	`mod+shift+h`

API Reference

API	Package	Use
`BaseHighlightPlugin`	`@platejs/basic-nodes`	Headless highlight plugin.
`HighlightPlugin`	`@platejs/basic-nodes/react`	React highlight plugin.
`HighlightRules.markdown(options)`	`@platejs/basic-nodes`	Creates a highlight mark input rule.
`tf.highlight.toggle()`	`@platejs/basic-nodes`	Toggles the highlight mark at the selection.
`HighlightLeaf`	Registry UI	Styled client highlight leaf.
`HighlightLeafStatic`	Registry UI	Styled static highlight leaf.

Code Keyboard Input

On This Page

Features Kit Usage Add Basic Marks Add A Toolbar Button Manual Usage Ownership Behavior API Reference

Build your editor

Production-ready AI template and reusable components.