Basic Marks Base Kit

Text

About

A Plate editor plugin kit that registers base marks — bold, italic, underline, code, strikethrough, subscript, superscript, highlight, and kbd — for static/server-side rendering.

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

Code

How Basic Marks Base Kit is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";

import { BaseBasicMarksKit } from "@/components/ui/basic-marks-base-kit";

export default function Demo() {
  const marks = [
    { label: "Bold", node: <strong>bold</strong> },
    { label: "Italic", node: <em>italic</em> },
    { label: "Underline", node: <u>underline</u> },
    {
      label: "Code",
      node: (
        <code className="rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm">
          code
        </code>
      ),
    },
    { label: "Strikethrough", node: <s>strikethrough</s> },
    {
      label: "Subscript",
      node: (
        <span>
          x<sub>2</sub>
        </span>
      ),
    },
    {
      label: "Superscript",
      node: (
        <span>
          x<sup>2</sup>
        </span>
      ),
    },
    {
      label: "Highlight",
      node: <mark className="bg-yellow-200 text-inherit">highlight</mark>,
    },
    {
      label: "Kbd",
      node: (
        <kbd className="rounded border bg-muted px-1.5 py-0.5 font-mono text-xs">
          ⌘K
        </kbd>
      ),
    },
  ];

  return (
    <div className="mx-auto max-w-md p-6">
      <p className="mb-3 text-sm text-muted-foreground">
        {BaseBasicMarksKit.length} basic mark plugins registered:
      </p>
      <ul className="space-y-2 text-sm">
        {marks.map((m) => (
          <li key={m.label} className="flex items-center justify-between gap-4">
            <span className="text-muted-foreground">{m.label}</span>
            <span>{m.node}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}