Code Block

A configurable code block component built on top of react-syntax-highlighter.

DummyComponent.jsx

const DummyComponent = () => {
  const [count, setCount] = React.useState(0);

  const handleClick = () => {
    setCount(prev => prev + 1);
  };

  return (
    <div className="p-4 border rounded-lg">
      <h2 className="text-xl font-bold mb-4">Fights Counter</h2>
      <p className="mb-2">Fight Club Fights Count: {count}</p>
      <button 
        onClick={handleClick}
        className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
      >
        Increment
      </button>
    </div>
  );
};

Installation

Run the following command

npx shadcn@latest add https://ui.aceternity.com/registry/code-block.json

Props

Prop	Type	Required	Description
`language`	`string`	Yes	The programming language for syntax highlighting
`filename`	`string`	Yes	The name of the file to display
`highlightLines`	`number[]`	No	Array of line numbers to highlight. Defaults to []
`code`	`string`	Conditional	The code content to display
`tabs`	`Array<TabConfig>`	Conditional	Array of tab configurations

Note: Either code OR tabs must be provided, but not both.

TabConfig Object Structure

Property	Type	Required	Description
`name`	`string`	Yes	The name of the tab
`code`	`string`	Yes	The code content for this tab
`language`	`string`	No	Override the default language for this tab
`highlightLines`	`number[]`	No	Override the default highlighted lines for this tab

Code Preview With Multiple Tabs

Open in

<div className="p-4 border rounded-lg">
  <h2 className="text-xl font-bold mb-4">Fights Counter</h2>
  <p className="mb-2">Fight Club Fights Count: {count}</p>
  <button 
    onClick={handleClick}
    className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
  >
    Increment
  </button>
</div>

Build websites faster and 10x better than your competitors with Aceternity UI Pro

With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.

Go Pro

This service exceeded our expectations, since not only was the development technically flawless, but Manu and his team also acted as strategic partners by encouraging us to add ...

Georg Weingartner

CMO at Renderwork