From zbeyens. The source code is available on GitHub.

Plate
PlatePliteEditorsTemplates
GitHub16kGitHub
DiscordDiscord
    • Stream
    • Copilot
  • Discussion
    • Comments
    • Suggestion
    • Basic Blocks
      • Blockquote
      • Heading
      • Horizontal Rule
    • Callout
    • Code Block
    • Column
    • Date
    • Equation
    • Link
    • List Classic
    • Media
    • MentionElement
    • Table
    • Table of Contents
    • Footnote
    • Toggle
  • Marks
    • Bold
    • Italic
    • Underline
    • Code
    • Highlight
    • Keyboard Input
    • Strikethrough
    • Subscript
    • Superscript
      • Font
      • Line Height
      • Text Align
    • Indent
    • List
      • Exit Break
      • Single Block
      • Trailing Block
    • Autoformat
    • Block Menu
    • Block Placeholder
    • Combobox
      • Emoji
      • MentionElement
      • Slash Command
    • Cursor Overlay
    • Drag & Drop
    • Navigation Feedback
    • Tabbable
    • Toolbar
    • Yjs
    • Multi SelectEditor
    • CSV
    • DOCX
    • HTML
    • Markdown

Code

PreviousNext

Add inline code formatting.

Basic MarksCode LeafMark Toolbar ButtonCode 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…
UnderlineHighlight

On This Page

FeaturesKit UsageAdd Basic MarksAdd A Toolbar ButtonManual UsageOwnershipBehaviorAPI Reference
Build your editor
Production-ready AI template and reusable components.
Get all-access

Features

  • Boolean code leaf property owned by the PLUGINS.code capability.
  • 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.
Report an issue

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,
  ScriptRules,
  StrikethroughRules,
  UnderlineRules,
} from '@platejs/basic-nodes';
import {
  BoldPlugin,
  CodePlugin,
  HighlightPlugin,
  ItalicPlugin,
  KbdPlugin,
  ScriptPlugin,
  StrikethroughPlugin,
  UnderlinePlugin,
} from '@platejs/basic-nodes/react';
 
import { CodeLeaf } from '@/components/editor/code';
import { HighlightLeaf } from '@/components/editor/highlight';
import { KbdLeaf } from '@/components/editor/kbd';
 
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({
    component: CodeLeaf,
    inputRules: [CodeRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+e' } },
  }),
  StrikethroughPlugin.configure({
    inputRules: [StrikethroughRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+shift+x' } },
  }),
  ScriptPlugin.configure({
    inputRules: [
      ScriptRules.markdown({ value: 'sub' }),
      ScriptRules.markdown({ value: 'sup' }),
    ],
    shortcuts: {
      subscript: {
        keys: 'mod+comma',
        handler: ({ editor }) => {
          editor.plugin(ScriptPlugin).update.toggle('sub');
        },
      },
      superscript: {
        keys: 'mod+period',
        handler: ({ editor }) => {
          editor.plugin(ScriptPlugin).update.toggle('sup');
        },
      },
    },
  }),
  HighlightPlugin.configure({
    component: HighlightLeaf,
    inputRules: [
      HighlightRules.markdown({ variant: '==' }),
      HighlightRules.markdown({ variant: '≡' }),
    ],
    shortcuts: { toggle: { keys: 'mod+shift+h' } },
  }),
  KbdPlugin.configure({ component: KbdLeaf }),
] as const;
'use client';
 
import {
  BoldRules,
  CodeRules,
  HighlightRules,
  ItalicRules,
  MarkComboRules,
  ScriptRules,
  StrikethroughRules,
  UnderlineRules,
} from '@platejs/basic-nodes';
import {
  BoldPlugin,
  CodePlugin,
  HighlightPlugin,
  ItalicPlugin,
  KbdPlugin,
  ScriptPlugin,
  StrikethroughPlugin,
  UnderlinePlugin,
} from '@platejs/basic-nodes/react';
 
import { CodeLeaf } from '@/components/editor/code';
import { HighlightLeaf } from '@/components/editor/highlight';





























































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

Add A Toolbar Button

Pass CodePlugin to MarkToolbarButton so the button uses the configured mark key.

import { Code2Icon } from 'lucide-react';
import { CodePlugin } from '@platejs/basic-nodes/react';
 
import { MarkToolbarButton } from '@/components/editor/mark-toolbar-button';
 
export function CodeToolbarButton() {
  return (
    <MarkToolbarButton plugin={CodePlugin} 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/editor/code';
 
export const codePlugin = CodePlugin.configure({
  component: CodeLeaf,
  inputRules: [CodeRules.markdown()],
  shortcuts: { toggle: { keys: 'mod+e' } },
});
import { CodeRules } from '@platejs/basic-nodes';
import { CodePlugin } from '@platejs/basic-nodes/react';
 
import { CodeLeaf } from '@/components/editor/code';
 
export const codePlugin = CodePlugin.configure({
  component: CodeLeaf,
  inputRules: [CodeRules.markdown()],
  shortcuts: { toggle: { keys: 'mod+e' } },
});

Ownership

SurfaceOwnerWhat It Does
BaseCodePlugin@platejs/basic-nodesHeadless inline code mark, HTML parser, render tag, selection rule, and toggle transform.
CodePlugin@platejs/basic-nodes/reactReact wrapper for the headless code mark.
CodeRules.markdown@platejs/basic-nodesOptional backtick input rule.
CodeLeafRegistry UIStyled inline code leaf using PlateLeaf.
CodeLeafStaticRegistry UIStatic rendering version using PliteLeaf.
BasicMarksKitRegistryAdds CodePlugin, CodeLeaf, CodeRules.markdown(), and mod+e.
MarkToolbarButtonRegistry UIReads active mark state and calls the mark toggle hook.

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

Behavior

BehaviorSource
Mark keyeditor.plugin(CodePlugin).schema.key (default: code)
Mark declarationschema.mark: property.boolean({ default: false, omitDefault: true })
Toggle commandtx.code.toggle() toggles the resolved schema key.
Selection affinityhard
HTML tagscode
HTML stylesfont-family: Consolas
HTML guardSkips code inside pre and paragraph-level Consolas blocks.
Render outputcode
Kit shortcutmod+e

API Reference

APIPackageUse
BaseCodePlugin@platejs/basic-nodesHeadless inline code plugin.
CodePlugin@platejs/basic-nodes/reactReact inline code plugin.
CodeRules.markdown()@platejs/basic-nodesCreates the backtick mark input rule.
tx.code.toggle()@platejs/basic-nodesToggles the inline code mark at the selection.
CodeLeafRegistry UIStyled client inline code leaf.
CodeLeafStaticRegistry UIStyled static inline code leaf.
import { KbdLeaf } from '@/components/editor/kbd';
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({
component: CodeLeaf,
inputRules: [CodeRules.markdown()],
shortcuts: { toggle: { keys: 'mod+e' } },
}),
StrikethroughPlugin.configure({
inputRules: [StrikethroughRules.markdown()],
shortcuts: { toggle: { keys: 'mod+shift+x' } },
}),
ScriptPlugin.configure({
inputRules: [
ScriptRules.markdown({ value: 'sub' }),
ScriptRules.markdown({ value: 'sup' }),
],
shortcuts: {
subscript: {
keys: 'mod+comma',
handler: ({ editor }) => {
editor.plugin(ScriptPlugin).update.toggle('sub');
},
},
superscript: {
keys: 'mod+period',
handler: ({ editor }) => {
editor.plugin(ScriptPlugin).update.toggle('sup');
},
},
},
}),
HighlightPlugin.configure({
component: HighlightLeaf,
inputRules: [
HighlightRules.markdown({ variant: '==' }),
HighlightRules.markdown({ variant: '≡' }),
],
shortcuts: { toggle: { keys: 'mod+shift+h' } },
}),
KbdPlugin.configure({ component: KbdLeaf }),
] as const;
plugins: [
...
BasicMarksKit],
});
import { Code2Icon } from 'lucide-react'; import { CodePlugin } from '@platejs/basic-nodes/react'; import { MarkToolbarButton } from '@/components/editor/mark-toolbar-button'; export function CodeToolbarButton() { return ( <MarkToolbarButton plugin={CodePlugin} tooltip="Code (⌘+E)"> <Code2Icon /> </MarkToolbarButton> ); }