{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "code-block-docs",
"title": "Code Block",
"description": "Documentation for Code Block",
"files": [
{
"path": "../../content/docs/(plugins)/(elements)/code-block.mdx",
"content": "---\ntitle: Code Block\ndocs:\n - route: https://pro.platejs.org/docs/components/code-block-node\n title: Plus\n - route: /docs/components/code-block-node\n title: Code Block Element\n---\n\n\n\n\n\n## Features\n\n- Syntax highlighting for code blocks\n- Support for multiple programming languages\n- Customizable language selection\n- Proper indentation handling\n- Markdown code fence shortcuts through `CodeBlockRules.markdown({ on })`\n\n\n\n## Kit Usage\n\n\n\n### Installation\n\nThe 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.\n\n\n\n- [`CodeBlockElement`](/docs/components/code-block-node): Renders code block containers.\n- [`CodeLineElement`](/docs/components/code-block-node): Renders individual code lines.\n- [`CodeSyntaxLeaf`](/docs/components/code-block-node): Renders syntax highlighted text.\n\n### Add Kit\n\nAdd the kit to your plugins:\n\n```tsx\nimport { createPlateEditor } from 'platejs/react';\nimport { CodeBlockKit } from '@/components/editor/plugins/code-block-kit';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n ...CodeBlockKit,\n ],\n});\n```\n\n\n\n## Manual Usage\n\n\n\n### Installation\n\n```bash\nnpm install @platejs/code-block lowlight\n```\n\n### Add Plugins\n\nInclude the code block plugins in your Plate plugins array when creating the editor.\n\n```tsx\nimport { CodeBlockPlugin, CodeLinePlugin, CodeSyntaxPlugin } from '@platejs/code-block/react';\nimport { createPlateEditor } from 'platejs/react';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n CodeBlockPlugin,\n CodeLinePlugin,\n CodeSyntaxPlugin,\n ],\n});\n```\n\n### Configure Plugins\n\nConfigure the plugins with syntax highlighting and custom components.\n\n**Basic Setup with All Languages:**\n\n```tsx\nimport { CodeBlockRules } from '@platejs/code-block';\nimport { CodeBlockPlugin, CodeLinePlugin, CodeSyntaxPlugin } from '@platejs/code-block/react';\nimport { all, createLowlight } from 'lowlight';\nimport { createPlateEditor } from 'platejs/react';\nimport { CodeBlockElement, CodeLineElement, CodeSyntaxLeaf } from '@/components/ui/code-block-node';\n\n// Create a lowlight instance with all languages\nconst lowlight = createLowlight(all);\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n CodeBlockPlugin.configure({\n inputRules: [CodeBlockRules.markdown({ on: 'match' })],\n node: { component: CodeBlockElement },\n options: { lowlight },\n shortcuts: { toggle: { keys: 'mod+alt+8' } },\n }),\n CodeLinePlugin.withComponent(CodeLineElement),\n CodeSyntaxPlugin.withComponent(CodeSyntaxLeaf),\n ],\n});\n```\n\n**Custom Language Setup (Optimized Bundle):**\n\nFor optimized bundle size, you can register only specific languages:\n\n```tsx\nimport { createLowlight } from 'lowlight';\nimport css from 'highlight.js/lib/languages/css';\nimport js from 'highlight.js/lib/languages/javascript';\nimport ts from 'highlight.js/lib/languages/typescript';\nimport html from 'highlight.js/lib/languages/xml';\n\n// Create a lowlight instance\nconst lowlight = createLowlight();\n\n// Register only the languages you need\nlowlight.register('html', html);\nlowlight.register('css', css);\nlowlight.register('js', js);\nlowlight.register('ts', ts);\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n CodeBlockPlugin.configure({\n inputRules: [CodeBlockRules.markdown({ on: 'match' })],\n node: { component: CodeBlockElement },\n options: {\n lowlight,\n defaultLanguage: 'js', // Set default language (optional)\n },\n shortcuts: { toggle: { keys: 'mod+alt+8' } },\n }),\n CodeLinePlugin.withComponent(CodeLineElement),\n CodeSyntaxPlugin.withComponent(CodeSyntaxLeaf),\n ],\n});\n```\n\n- `node.component`: Assigns [`CodeBlockElement`](/docs/components/code-block-node) to render code block containers.\n- `inputRules`: Registers the triple-backtick fence rule. Use `on: 'match'` to commit when the fence becomes complete or `on: 'break'` to commit on `Enter`.\n- `options.lowlight`: Lowlight instance for syntax highlighting.\n- `options.defaultLanguage`: Default language when no language is specified.\n- `shortcuts.toggle`: Defines a keyboard [shortcut](/docs/plugin-shortcuts) to toggle code blocks.\n- `withComponent`: Assigns components for code lines and syntax highlighting.\n\nFor the runtime model, see [Plugin Input Rules](/docs/plugin-input-rules).\n\n### Turn Into Toolbar Button\n\nYou can add this item to the [Turn Into Toolbar Button](/docs/toolbar#turn-into-toolbar-button) to convert blocks into code blocks:\n\n```tsx\n{\n icon: ,\n label: 'Code',\n value: KEYS.codeBlock,\n}\n```\n\n### Insert Toolbar Button\n\nYou can add this item to the [Insert Toolbar Button](/docs/toolbar#insert-toolbar-button) to insert code block elements:\n\n```tsx\n{\n icon: ,\n label: 'Code',\n value: KEYS.codeBlock,\n}\n```\n\n\n\n## Plugins\n\n### `CodeBlockPlugin`\n\n\n\n \n Default language to use when no language is specified. Set to null to disable syntax highlighting by default.\n \n | null\" optional>\n Lowlight instance to use for highlighting. If not provided, syntax highlighting will be disabled.\n \n\n\n\n## API\n\n### `isCodeBlockEmpty`\n\n\n\n Whether the selection is in an empty code block.\n\n\n\n### `isSelectionAtCodeBlockStart`\n\n\n\n Whether the selection is at the start of the first code line in a code block.\n\n\n\n### `indentCodeLine`\n\nIndents 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.\n\n\n\n \n The code line to be indented.\n \n \n The size of indentation for the code line.\n - **Default:** `2`\n \n\n\n\n### `insertCodeBlock`\n\nInserts 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.\n\n\n\n \" optional>\n Options for inserting nodes.\n \n\n\n\n### `insertCodeLine`\n\nInserts a code line starting with the specified indentation depth.\n\n\n\n \n The depth of indentation for the code line.\n - **Default:** `0`\n \n\n\n\n### `outdentCodeLine`\n\nOutdents a code line, removing two whitespace characters if present.\n\n\n\n \n The code line to be outdented.\n \n \n The code block containing the code line to be outdented.\n \n\n\n\n### `toggleCodeBlock`\n\nToggles the code block in the editor.\n\n### `unwrapCodeBlock`\n\nUnwraps the code block in the editor. \n",
"type": "registry:file",
"target": "content/docs/plate/(plugins)/(elements)/code-block.mdx"
}
],
"type": "registry:file"
}