ContextQMD
Back to Plate

Basic Marks

content/(plugins)/(marks)/basic-marks.mdx

53.0.52.7 KB
Original Source
<Cards> <Card icon="bold" title="Bold" href="/docs/bold"> Apply bold formatting to emphasize important text. </Card> <Card icon="italic" title="Italic" href="/docs/italic"> Apply italic formatting for emphasis or stylistic purposes. </Card> <Card icon="underline" title="Underline" href="/docs/underline"> Apply underline formatting to text. </Card> <Card icon="strikethrough" title="Strikethrough" href="/docs/strikethrough"> Apply strikethrough formatting to indicate deleted content. </Card> <Card icon="code" title="Code" href="/docs/code"> Format inline code snippets and technical terms. </Card> <Card icon="subscript" title="Subscript" href="/docs/subscript"> Format text as subscript for mathematical expressions. </Card> <Card icon="superscript" title="Superscript" href="/docs/superscript"> Format text as superscript for mathematical expressions. </Card> <Card icon="kbd" title="Kbd" href="/docs/kbd"> Display keyboard shortcuts and key combinations. </Card> <Card icon="highlight" title="Highlight" href="/docs/highlight"> Highlight important text with background colors. </Card> </Cards> <ComponentPreview name="basic-marks-demo" />

Kit Usage

<Steps>

Installation

The BasicMarksKit bundles plugins for Bold, Italic, Underline, Strikethrough, Code, Subscript, Superscript, Highlight, and Kbd marks, along with their respective UI components from Plate UI. It also registers the shipped markdown input rules for those mark families.

<ComponentSource name="basic-marks-kit" />

Add Kit

Add the kit to your plugins:

tsx
import { createPlateEditor } from 'platejs/react';
import { BasicMarksKit } from '@/components/editor/plugins/basic-marks-kit';

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...BasicMarksKit,
  ],
});
</Steps>

The kit enables the common mark shortcuts out of the box, including:

  • **bold** / __bold__
  • *italic* / _italic_
  • `code`
  • ~~strike~~
  • ~sub~
  • ^sup^
  • ==highlight==

See the Plugin Input Rules guide for the runtime model and the exact rule families.

Manual Usage

bash
npm install @platejs/basic-nodes

Add Toolbar Button

You can add MarkToolbarButton to your Toolbar to control text formatting marks.

For individual plugin setup and configuration, see the specific plugin documentation pages linked above.