Highlight Leaf

Text 6

About

A text highlighter leaf that renders marked inline text with a customizable highlight color inside a Plate editor.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Highlight Leaf to your project and fits it to your theme.

Code

How Highlight Leaf is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";

import { HighlightLeaf } from "@/components/ui/highlight-node";

import { HighlightRules } from "@platejs/basic-nodes";
import { HighlightPlugin } from "@platejs/basic-nodes/react";
import { Plate, PlateContent, usePlateEditor } from "platejs/react";

const initialValue = [
  {
    type: "p",
    children: [
      { text: "Plate makes it easy to " },
      { highlight: true, text: "highlight important information" },
      { text: " so it stands out from the rest of your document." },
    ],
  },
  {
    type: "p",
    children: [
      {
        text: "Select any text and press ⌘ + Shift + H, or type ==marked text== to ",
      },
      { highlight: true, text: "highlight inline" },
      { text: " as you write." },
    ],
  },
];

export default function HighlightLeafDemo() {
  const editor = usePlateEditor({
    plugins: [
      HighlightPlugin.configure({
        inputRules: [HighlightRules.markdown({ variant: "==" })],
        node: { component: HighlightLeaf },
        shortcuts: { toggle: { keys: "mod+shift+h" } },
      }),
    ],
    value: initialValue,
  });

  return (
    <div className="mx-auto w-full max-w-xl rounded-lg border bg-background p-2 shadow-sm">
      <Plate editor={editor}>
        <PlateContent
          className="min-h-[160px] rounded-md px-4 py-3 text-base leading-7 text-foreground focus:outline-none [&_[data-slate-placeholder]]:text-muted-foreground"
          placeholder="Write something and highlight it…"
        />
      </Plate>
    </div>
  );
}