Code Block Kit

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

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 components.

• CodeBlockElement: Renders code block containers.
• CodeLineElement: Renders individual code lines.
• CodeSyntaxLeaf: Renders syntax highlighted text.

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