Code

Add inline code formatting.

Basic Marks Code Leaf Mark Toolbar Button Code Block

Code applies the code leaf mark to inline text. Use Code Block for fenced or multiline code; this page is only for inline code spans.

Loading…

Features

KEYS.code leaf mark.
Hard selection affinity.
HTML deserialization from code tags and Consolas font styles.
<code> rendering by default.
Registry CodeLeaf for styled inline code.
Optional Markdown-style input rule through CodeRules.

Kit Usage

Add Basic Marks

BasicMarksKit includes CodePlugin, CodeLeaf, the backtick input rule, and a mod+e 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.code.

import { Code2Icon } from 'lucide-react';
import { KEYS } from 'platejs';
 
import { MarkToolbarButton } from '@/components/ui/mark-toolbar-button';
 
export function CodeToolbarButton() {
  return (
    <MarkToolbarButton nodeType={KEYS.code} tooltip="Code (⌘+E)">
      <Code2Icon />
    </MarkToolbarButton>
  );
}

import { Code2Icon } from 'lucide-react';
import { KEYS } from 'platejs';
 
import { MarkToolbarButton } from '@/components/ui/mark-toolbar-button';
 
export function CodeToolbarButton() {
  return (
    <MarkToolbarButton nodeType={KEYS.code} tooltip="Code (⌘+E)">
      <Code2Icon />
    </MarkToolbarButton>
  );
}

Manual Usage

Install the mark package.

pnpm add @platejs/basic-nodes

pnpm add @platejs/basic-nodes

Add CodePlugin directly when you want the default <code> render.

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

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

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

import { CodeRules } from '@platejs/basic-nodes';
import { CodePlugin } from '@platejs/basic-nodes/react';
 
import { CodeLeaf } from '@/components/ui/code-node';
 
export const codePlugin = CodePlugin.configure({
  inputRules: [CodeRules.markdown()],
  node: { component: CodeLeaf },
  shortcuts: { toggle: { keys: 'mod+e' } },
});

import { CodeRules } from '@platejs/basic-nodes';
import { CodePlugin } from '@platejs/basic-nodes/react';
 
import { CodeLeaf } from '@/components/ui/code-node';
 
export const codePlugin = CodePlugin.configure({
  inputRules: [CodeRules.markdown()],
  node: { component: CodeLeaf },
  shortcuts: { toggle: { keys: 'mod+e' } },
});

Ownership

Surface	Owner	What It Does
`BaseCodePlugin`	`@platejs/basic-nodes`	Headless inline code mark, HTML parser, render tag, selection rule, and `toggle` transform.
`CodePlugin`	`@platejs/basic-nodes/react`	React wrapper for the headless code mark.
`CodeRules.markdown`	`@platejs/basic-nodes`	Optional backtick input rule.
`CodeLeaf`	Registry UI	Styled inline code leaf using `PlateLeaf`.
`CodeLeafStatic`	Registry UI	Static rendering version using `SlateLeaf`.
`BasicMarksKit`	Registry	Adds `CodePlugin`, `CodeLeaf`, `CodeRules.markdown()`, and `mod+e`.
`MarkToolbarButton`	Registry UI	Reads active mark state and calls the mark toggle hook.

The package owns inline code semantics. The registry owns visual styling and toolbar placement.

Behavior

Behavior	Source
Mark key	`KEYS.code`
Leaf behavior	`node.isLeaf: true`
Toggle transform	`editor.tf.code.toggle()` calls `editor.tf.toggleMark(type)`.
Selection affinity	`hard`
HTML tags	`code`
HTML styles	`font-family: Consolas`
HTML guard	Skips code inside `pre` and paragraph-level Consolas blocks.
Render output	`code`
Kit shortcut	`mod+e`

API Reference

API	Package	Use
`BaseCodePlugin`	`@platejs/basic-nodes`	Headless inline code plugin.
`CodePlugin`	`@platejs/basic-nodes/react`	React inline code plugin.
`CodeRules.markdown()`	`@platejs/basic-nodes`	Creates the backtick mark input rule.
`tf.code.toggle()`	`@platejs/basic-nodes`	Toggles the inline code mark at the selection.
`CodeLeaf`	Registry UI	Styled client inline code leaf.
`CodeLeafStatic`	Registry UI	Styled static inline code leaf.

Underline Highlight

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.