Code

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.

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.

</PackageInfo>

Kit Usage

<Steps>

Add Basic Marks

BasicMarksKit includes CodePlugin, CodeLeaf, the backtick input rule, and a mod+e shortcut.

tsx

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.

tsx

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>
  );
}

</Steps>

Manual Usage

Install the mark package.

bash

npm install @platejs/basic-nodes

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

tsx

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.

tsx

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.