Code Block
The Code Block component displays syntax-highlighted code with built-in copy and external link features.Installation
Usage
Basic Code Block
Single Line Code Block
Code Block with Line Numbers
Code Block with External Link
Code Block Wrapper and Tabs
Props
CodeBlock
The language of the code snippet. Supports all languages from react-syntax-highlighter.
The code snippet to be rendered.
Variant of code block to render.
Overrides the default element name to apply unique styles with the Customization Provider.
Display line numbers alongside the code.
Enable line wrapping for long lines of code.
Maximum number of lines to display before scrolling.
URL for the external link button.
Label for the copy button before copying.
Label for the copy button after copying.
Label for the external link button.
Function to format the code before copying to clipboard.
Supported Languages
Code Block supports syntax highlighting for numerous languages including:- JavaScript/TypeScript
- Python
- Java
- C/C++/C#
- Ruby
- Go
- Rust
- PHP
- HTML/CSS
- JSON/YAML
- Bash/Shell
- SQL
- And many more…
Features
- Syntax highlighting for 100+ languages
- Built-in copy to clipboard functionality
- Optional external link button
- Line numbers support
- Line wrapping options
- Single-line and multi-line variants
- Tab support for multiple code snippets
- Dark theme optimized for Paste design system
- Customizable i18n labels