4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1e64,--- title: Code Block docs: - route: https://pro.platejs.org/docs/components/code-block-node title: Plus - route: /docs/components/code-block-node title: Code Block Element --- ## Features - Syntax highlighting for code blocks - Support for multiple programming languages - Customizable language selection - Proper indentation handling - Markdown code fence shortcuts through `CodeBlockRules.markdown({ on })` ## 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, the shipped triple-backtick input rule, and [Plate UI](/docs/installation/plate-ui) components. - [`CodeBlockElement`](/docs/components/code-block-node): Renders code block containers. - [`CodeLineElement`](/docs/components/code-block-node): Renders individual code lines. - [`CodeSyntaxLeaf`](/docs/components/code-block-node): Renders syntax highlighted text. ### Add Kit Add the kit to your plugins: ```tsx import { createPlateEditor } from 'platejs/react'; import { CodeBlockKit } from '@/components/editor/plugins/code-block-kit'; const editor = createPlateEditor({ plugins: [ // ...otherPlugins, ...CodeBlockKit, ], }); ``` ## Manual Usage ### Installation ```bash npm install @platejs/code-block lowlight ``` ### Add Plugins Include the code block plugins in your Plate plugins array when creating the editor. ```tsx 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:** ```tsx import { CodeBlockRules } from '@platejs/code-block'; 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({ inputRules: [CodeBlockRules.markdown({ on: 'match' })], 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: ```tsx 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({ inputRules: [CodeBlockRules.markdown({ on: 'match' })], 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`](/docs/components/code-block-node) to render code block containers. - `inputRules`: Registers the triple-backtick fence rule. Use `on: 'match'` to commit when the fence becomes complete or `on: 'break'` to commit on `Enter`. - `options.lowlight`: Lowlight instance for syntax highlighting. - `options.defaultLanguage`: Default language when no language is specified. - `shortcuts.toggle`: Defines a keyboard [shortcut](/docs/plugin-shortcuts) to toggle code blocks. - `withComponent`: Assigns components for code lines and syntax highlighting. For the runtime model, see [Plugin Input Rules](/docs/plugin-input-rules). ### Turn Into Toolbar Button You can add this item to the [Turn Into Toolbar Button](/docs/toolbar#turn-into-toolbar-button) to convert blocks into code blocks: ```tsx { icon: , label: 'Code', value: KEYS.codeBlock, } ``` ### Insert Toolbar Button You can add this item to the [Insert Toolbar Button](/docs/toolbar#insert-toolbar-button) to insert code block elements: ```tsx { icon: , label: 'Code', value: KEYS.codeBlock, } ``` ## Plugins ### `CodeBlockPlugin` 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` Whether the selection is in an empty code block. ### `isSelectionAtCodeBlockStart` 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. 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. Options for inserting nodes. ### `insertCodeLine` Inserts a code line starting with the specified indentation depth. The depth of indentation for the code line. - **Default:** `0` ### `outdentCodeLine` Outdents a code line, removing two whitespace characters if present. 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. 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"../../content/docs/(plugins)/(elements)/code-block.mdx","content":"$50","type":"registry:file","target":"content/docs/plate/(plugins)/(elements)/code-block.mdx"}],"className":"h-[70svh] min-h-80"}]]}]