Code Block Element

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

Basic ElementsBlock Context MenuBlock MenuBlock Menu ItemsButtonColor Dropdown MenuCommandDialogDropdown MenuInputMenuPopoverSeparatorSpinnerToolbarTooltipTurn Into Dropdown Menu

Installation

Install the following dependencies:

npm install @udecode/plate-code-block @udecode/plate-selection @udecode/plate-ai @udecode/plate-caption @udecode/plate-comments @udecode/plate-font @udecode/plate-media @radix-ui/react-toolbar @radix-ui/react-tooltip @radix-ui/react-separator @radix-ui/react-dropdown-menu @udecode/plate-block-quote @udecode/plate-callout @udecode/plate-heading @udecode/plate-indent-list @udecode/plate-toggle @udecode/plate-date @udecode/plate-layout @udecode/plate-math @udecode/plate-table @ariakit/[email protected] @radix-ui/react-slot @radix-ui/react-popover @radix-ui/react-dialog cmdk jotai-x vaul

Copy and paste the following code into your project.

Get the code ->

Update the import paths to match your project setup.

Examples

Callout ElementCode Leaf