āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/udecode/plate/(plugins)/(elements)/code-block ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
title: Code Block docs:
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.
CodeBlockElement: Renders code block containers.CodeLineElement: Renders individual code lines.CodeSyntaxLeaf: Renders syntax highlighted text.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,
],
});
npm install @platejs/code-block lowlight
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 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.You can add this item to the Turn Into Toolbar Button to convert blocks into code blocks:
{
icon: <FileCodeIcon />,
label: 'Code',
value: KEYS.codeBlock,
}
You can add this item to the Insert Toolbar Button to insert code block elements:
{
icon: <FileCodeIcon />,
label: 'Code',
value: KEYS.codeBlock,
}
CodeBlockPluginisCodeBlockEmptyisSelectionAtCodeBlockStartindentCodeLineIndents 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.
<API name="indentCodeLine"> <APIOptions type="IndentCodeLineOptions"> <APIItem name="codeLine" type="ElementEntry"> The code line to be indented. </APIItem> <APIItem name="indentDepth" type="number"> The size of indentation for the code line. - **Default:** `2` </APIItem> </APIOptions> </API>insertCodeBlockInserts 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.
<API name="insertCodeBlock"> <APIParameters> <APIItem name="insertNodesOptions" type="Omit<InsertNodesOptions, 'match'>" optional> Options for inserting nodes. </APIItem> </APIParameters> </API>insertCodeLineInserts a code line starting with the specified indentation depth.
<API name="insertCodeLine"> <APIParameters> <APIItem name="indentDepth" type="number" optional> The depth of indentation for the code line. - **Default:** `0` </APIItem> </APIParameters> </API>outdentCodeLineOutdents a code line, removing two whitespace characters if present.
<API name="outdentCodeLine"> <APIOptions type="OutdentCodeLineOptions"> <APIItem name="codeLine" type="ElementEntry"> The code line to be outdented. </APIItem> <APIItem name="codeBlock" type="ElementEntry"> The code block containing the code line to be outdented. </APIItem> </APIOptions> </API>toggleCodeBlockToggles the code block in the editor.
unwrapCodeBlockUnwraps the code block in the editor.
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā