Code Block
Provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.
Powered by
MyComponent.jsx
function MyComponent(props) { return ( <div> <h1>Hello, {props.name}!</h1> <p>This is an example React component.</p> </div> );}Installation
npx kibo-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
function MyComponent(props) { return ( <div> <h1>Hello, {props.name}!</h1> <p>This is an example React component.</p> </div> );}Highlighted lines
MyComponent.jsx
function MyComponent(props) { // [!code highlight] return ( <div> <h1>Hello, {props.name}!</h1> // [!code highlight] <p>This is an example React component.</p> </div> );}Highlighted words
MyComponent.jsx
function MyComponent(props) { return ( <div> // [!code word:props.name] <h1>Hello, {props.name}!</h1> <p>This is an example React component.</p> </div> );}Diff
utils.js
function calculateTotal(items) { let total = 0; for (let i = 0; i < items.length; i++) { total += items[i].price * items[i].quantity; // [!code --] const itemTotal = items[i].price * items[i].quantity; // [!code ++] total += itemTotal; // [!code ++] } return total;}Focus
utils.js
function calculateDiscount(price, percentage) { const discount = price * (percentage / 100); // [!code focus] return price - discount;}// Example usageconst finalPrice = calculateDiscount(100, 20);console.log(finalPrice); // 80Hidden line numbers
MyComponent.jsx
function MyComponent(props) { return ( <div> <h1>Hello, {props.name}!</h1> <p>This is an example React component.</p> </div> );}No syntax highlighting
MyComponent.jsx
function MyComponent(props) { return ( <div> <h1>Hello, {props.name}!</h1> <p>This is an example React component.</p> </div> );}Custom Theme
MyComponent.jsx
function MyComponent(props) { return ( <div> <h1>Hello, {props.name}!</h1> <p>This is an example React component.</p> </div> );}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/kibo-ui/code-block';
import { CodeBlockContent } from '@/components/kibo-ui/code-block/server';