Code Block
Provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.
Powered by
Example for code-block is not yet available.
This component is being prepared and will be available soon.
Installation
npx devcn-ui@latest add code-block
Features
- Syntax highlighting
- Line numbers
- Copy to clipboard
- Support for filenames
- Highlighted lines and words
- Focused line
- Diff
- Language detection
- Theme support
- Customizable styles
Examples
No header
Example for code-block-headless is not yet available.
This component is being prepared and will be available soon.
Highlighted lines
Example for code-block-highlight-line is not yet available.
This component is being prepared and will be available soon.
Highlighted words
Example for code-block-highlight-word is not yet available.
This component is being prepared and will be available soon.
Diff
Example for code-block-diff is not yet available.
This component is being prepared and will be available soon.
Focus
Example for code-block-focus is not yet available.
This component is being prepared and will be available soon.
Hidden line numbers
Example for code-block-numberless is not yet available.
This component is being prepared and will be available soon.
No syntax highlighting
Example for code-block-no-highlighting is not yet available.
This component is being prepared and will be available soon.
Custom Theme
Example for code-block-theme is not yet available.
This component is being prepared and will be available soon.
Notes
React Server Component
You can use the RSC version of the Code Block component by importing the CodeBlockContent component from code-block/server i.e.
import {
CodeBlock,
CodeBlockHeader,
// ... the rest of the components
CodeBlockBody,
// CodeBlockContent,
} from '@/components/ui/devcn-ui/code-block';
import { CodeBlockContent } from '@/components/devcn-ui/code-block/server';