Code Block

Provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.

Lucide

Simple Icons

Shiki

MyComponent.jsx

function MyComponent(props) {  return (    <div>      <h1>Hello, {props.name}!</h1>      <p>This is an example React component.</p>    </div>  );}

Installation

npx pal-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); // 80

Hidden 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/pal-ui/code-block';
import { CodeBlockContent } from '@/components/pal-ui/code-block/server';

Code Block

On this page