Components
Code Block Element

Code Block Element

Displays a code block with syntax highlighting, language selection, and copy functionality.

API ReferenceBlock Context MenuBlock MenuBlock SelectionButtonColor Dropdown MenuCommandDialogDropdown MenuInputMenuPlate ElementPopoverToolbarTooltipTurn Into Dropdown Menu
Get the code ->

🌳 Blocks

Easily create headings of various levels, from H1 to H6, to structure your content and make it more organized.
Create blockquotes to emphasize important information or highlight quotes from external sources.
// Use code blocks to showcase code snippets
function greet() {
  console.info('Hello World!');
}

Installation

Install the following dependencies:

npm install @udecode/plate-code-block prismjs @udecode/plate-selection @udecode/plate-caption @udecode/plate-font @udecode/plate-media @radix-ui/react-toolbar @radix-ui/react-dropdown-menu @udecode/plate-block-quote @udecode/plate-callout @udecode/plate-heading @udecode/plate-indent-list @udecode/plate-toggle @ariakit/[email protected] @radix-ui/react-slot @radix-ui/react-tooltip @radix-ui/react-popover @radix-ui/react-dialog

Copy and paste the following code into your project.

Get the code ->

Update the import paths to match your project setup.

CaptionCode Leaf