Plate
PlateEditorsTemplates
GitHub16kGitHub
DiscordDiscord
    • Stream
    • Copilot
  • Comments
  • Discussion
  • Suggestions
    • Basic Blocks
      • Blockquote
      • Heading
      • Horizontal Rule
    • Callout
    • Code Block
    • Column
    • Date
    • Equation
    • Link
    • Media
    • MentionElement
    • Table
    • Table of Contents
    • Footnote
    • Details
  • 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
    • 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';
import {
  BoldPlugin,
  CodePlugin,
  HighlightPlugin,
  ItalicPlugin,
  KbdPlugin,
  ScriptPlugin,
  StrikethroughPlugin,
  UnderlinePlugin,
} from 'platejs/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';
import {
  BoldPlugin,
  CodePlugin,
  HighlightPlugin,
  ItalicPlugin,
  KbdPlugin,
  ScriptPlugin,
  StrikethroughPlugin,
  UnderlinePlugin,
} from 'platejs/react';
 
import { CodeLeaf } from '@/components/editor/code';
import { HighlightLeaf } from '@/components/editor/highlight';





























































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

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/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 @tanstack/react-virtual
pnpm add platejs @tanstack/react-virtual

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

import { CodePlugin } from 'platejs/react';
import { createEditor } from 'platejs/react';
 
export const editor = createEditor({
  plugins: [CodePlugin],
});
import { CodePlugin } from 'platejs/react';
import { createEditor } from 'platejs/react';
 
export const editor = createEditor({
  plugins: [CodePlugin],
});

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

import { CodeRules } from 'platejs';
import { CodePlugin } from 'platejs/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';
import { CodePlugin } from 'platejs/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
BaseCodePluginplatejsHeadless inline code mark, HTML parser, render tag, selection rule, and toggle transform.
CodePluginplatejs/reactReact wrapper for the headless code mark.
CodeRules.markdownplatejsOptional backtick input rule.
CodeLeafRegistry UIStyled inline code leaf using EditorLeaf.
CodeLeafStaticRegistry UIStatic rendering version using EditorLeaf.
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
BaseCodePluginplatejsHeadless inline code plugin.
CodePluginplatejs/reactReact inline code plugin.
CodeRules.markdown()platejsCreates the backtick mark input rule.
tx.code.toggle()platejsToggles 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/react'; import { MarkToolbarButton } from '@/components/editor/mark-toolbar-button'; export function CodeToolbarButton() { return ( <MarkToolbarButton plugin={CodePlugin} tooltip="Code (⌘+E)"> <Code2Icon /> </MarkToolbarButton> ); }