Code Block Provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.
function MyComponent(props) { return ( <div> <h1>Hello, {props.name}!</h1> <p>This is an example React component.</p> </div> ); }
Installation npx kibo-ui add code-block
Syntax highlighting
Line numbers
Copy to clipboard
Support for filenames
Highlighted lines and words
Focused line
Diff
Language detection
Theme support
Customizable styles
function MyComponent(props) { return ( <div> <h1>Hello, {props.name}!</h1> <p>This is an example React component.</p> </div> ); }
function MyComponent(props) { // [!code highlight] return ( <div> <h1>Hello, {props.name}!</h1> // [!code highlight] <p>This is an example React component.</p> </div> ); }
function MyComponent(props) { return ( <div> // [!code word:props.name] <h1>Hello, {props.name}!</h1> <p>This is an example React component.</p> </div> ); }
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; }
function calculateDiscount(price, percentage) { const discount = price * (percentage / 100); // [!code focus] return price - discount; } // Example usage const finalPrice = calculateDiscount(100, 20); console.log(finalPrice); // 80
function MyComponent(props) { return ( <div> <h1>Hello, {props.name}!</h1> <p>This is an example React component.</p> </div> ); }
function MyComponent(props) { return ( <div> <h1>Hello, {props.name}!</h1> <p>This is an example React component.</p> </div> ); }
function MyComponent(props) { return ( <div> <h1>Hello, {props.name}!</h1> <p>This is an example React component.</p> </div> ); }
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/kibo-ui/code-block' ; import { CodeBlockContent } from '@/components/kibo-ui/code-block/server' ; 
Shadcn UI Blocks