Code Block

PreviousNext
Code Block Element
Loading...
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Features

  • Syntax highlighting for code blocks
  • Support for multiple programming languages
  • Customizable language selection
  • Proper indentation handling

Kit Usage

Installation

The fastest way to add code block functionality is with the CodeBlockKit, which includes pre-configured CodeBlockPlugin, CodeLinePlugin, and CodeSyntaxPlugin with syntax highlighting and Plate UI components.

'use client';
 
import {
  CodeBlockPlugin,
  CodeLinePlugin,
  CodeSyntaxPlugin,
} from '@platejs/code-block/react';
import { all, createLowlight } from 'lowlight';
 
import {
  CodeBlockElement,
  CodeLineElement,
  CodeSyntaxLeaf,
} from '@/components/ui/code-block-node';
 
const lowlight = createLowlight(all);
 
export const CodeBlockKit = [
  CodeBlockPlugin.configure({
    node: { component: CodeBlockElement },
    options: { lowlight },
    shortcuts: { toggle: { keys: 'mod+alt+8' } },
  }),
  CodeLinePlugin.withComponent(CodeLineElement),
  CodeSyntaxPlugin.withComponent(CodeSyntaxLeaf),
];

Add Kit

Add the kit to your plugins:

import { createPlateEditor } from 'platejs/react';
import { CodeBlockKit } from '@/components/editor/plugins/code-block-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...CodeBlockKit,
  ],
});

Manual Usage

Installation

pnpm add @platejs/code-block lowlight

Add Plugins

Include the code block plugins in your Plate plugins array when creating the editor.

import { CodeBlockPlugin, CodeLinePlugin, CodeSyntaxPlugin } from '@platejs/code-block/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    CodeBlockPlugin,
    CodeLinePlugin,
    CodeSyntaxPlugin,
  ],
});

Configure Plugins

Configure the plugins with syntax highlighting and custom components.

Basic Setup with All Languages:

import { CodeBlockPlugin, CodeLinePlugin, CodeSyntaxPlugin } from '@platejs/code-block/react';
import { all, createLowlight } from 'lowlight';
import { createPlateEditor } from 'platejs/react';
import { CodeBlockElement, CodeLineElement, CodeSyntaxLeaf } from '@/components/ui/code-block-node';
 
// Create a lowlight instance with all languages
const lowlight = createLowlight(all);
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    CodeBlockPlugin.configure({
      node: { component: CodeBlockElement },
      options: { lowlight },
      shortcuts: { toggle: { keys: 'mod+alt+8' } },
    }),
    CodeLinePlugin.withComponent(CodeLineElement),
    CodeSyntaxPlugin.withComponent(CodeSyntaxLeaf),
  ],
});

Custom Language Setup (Optimized Bundle):

For optimized bundle size, you can register only specific languages:

import { createLowlight } from 'lowlight';
import css from 'highlight.js/lib/languages/css';
import js from 'highlight.js/lib/languages/javascript';
import ts from 'highlight.js/lib/languages/typescript';
import html from 'highlight.js/lib/languages/xml';
 
// Create a lowlight instance
const lowlight = createLowlight();
 
// Register only the languages you need
lowlight.register('html', html);
lowlight.register('css', css);
lowlight.register('js', js);
lowlight.register('ts', ts);
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    CodeBlockPlugin.configure({
      node: { component: CodeBlockElement },
      options: {
        lowlight,
        defaultLanguage: 'js', // Set default language (optional)
      },
      shortcuts: { toggle: { keys: 'mod+alt+8' } },
    }),
    CodeLinePlugin.withComponent(CodeLineElement),
    CodeSyntaxPlugin.withComponent(CodeSyntaxLeaf),
  ],
});
  • node.component: Assigns CodeBlockElement to render code block containers.
  • options.lowlight: Lowlight instance for syntax highlighting.
  • options.defaultLanguage: Default language when no language is specified.
  • shortcuts.toggle: Defines a keyboard shortcut to toggle code blocks.
  • withComponent: Assigns components for code lines and syntax highlighting.

Turn Into Toolbar Button

You can add this item to the Turn Into Toolbar Button to convert blocks into code blocks:

{
  icon: <FileCodeIcon />,
  label: 'Code',
  value: KEYS.codeBlock,
}

Insert Toolbar Button

You can add this item to the Insert Toolbar Button to insert code block elements:

{
  icon: <FileCodeIcon />,
  label: 'Code',
  value: KEYS.codeBlock,
}

Plugins

CodeBlockPlugin

Options

Collapse all

    Default language to use when no language is specified. Set to null to disable syntax highlighting by default.

    Lowlight instance to use for highlighting. If not provided, syntax highlighting will be disabled.

API

isCodeBlockEmpty

Returnsboolean

    Whether the selection is in an empty code block.

isSelectionAtCodeBlockStart

Returnsboolean

    Whether the selection is at the start of the first code line in a code block.

indentCodeLine

Indents the code line if the selection is expanded or there are no non-whitespace characters at left of the cursor. The indentation is 2 spaces by default.

OptionsIndentCodeLineOptions

Collapse all

    The code line to be indented.

    The size of indentation for the code line.

    • Default: 2

insertCodeBlock

Inserts a code block by setting the node to code line and wrapping it with a code block. If the cursor is not at the block start, it inserts a break before the code block.

Parameters

Collapse all

    Options for inserting nodes.

insertCodeLine

Inserts a code line starting with the specified indentation depth.

Parameters

Collapse all

    The depth of indentation for the code line.

    • Default: 0

outdentCodeLine

Outdents a code line, removing two whitespace characters if present.

OptionsOutdentCodeLineOptions

Collapse all

    The code line to be outdented.

    The code block containing the code line to be outdented.

toggleCodeBlock

Toggles the code block in the editor.

unwrapCodeBlock

Unwraps the code block in the editor.

CalloutColumn