Code Block

Data Display
Content

Display code snippets with syntax highlighting hints, line numbers, copy functionality, and optional filename headers.

Preview

Code block examples

greet.ts
function greet(name: string): string {
  return `Hello, ${name}!`;
}
 
const message = greet('World');
console.log(message);

Basic Usage

Simple code display

javascript
const hello = 'Hello, World!';

With Filename

Code block with filename header

Counter.tsx
import { useState } from 'react';
 
export function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

Variants

Different visual styles

Default (Dark)

javascript
const theme = 'dark';

Light

javascript
const theme = 'light';

Line Numbers

Show line numbers for reference

css
.container {
  display: flex;
  gap: 1rem;
  padding: 2rem;
}
 
.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Highlighted Lines

Highlight specific lines

tsx
import { useState } from 'react';
 
export function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

Custom Start Line

Start line numbers from a specific number

tsx
  return (
    <div className="app">
      <Header />
      <Main />
    </div>
  );

Max Height

Scrollable code block with max height

javascript
// Long file content
const line1 = 'First line';
const line2 = 'Second line';
const line3 = 'Third line';
const line4 = 'Fourth line';
const line5 = 'Fifth line';
const line6 = 'Sixth line';
const line7 = 'Seventh line';
const line8 = 'Eighth line';
const line9 = 'Ninth line';
const line10 = 'Tenth line';
const line11 = 'Eleventh line';
const line12 = 'Twelfth line';

Word Wrap

Wrap long lines instead of scrolling

Without wrap (scrolls horizontally)

javascript
const veryLongLine = "This is a very long line of code that would normally cause horizontal scrolling in the code block component";

With wrap

javascript
const veryLongLine = "This is a very long line of code that would normally cause horizontal scrolling in the code block component";

Language Support

Various language indicators

json
{
  "name": "eidetic-ui",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.0.0",
    "next": "^14.0.0"
  }
}
bash
$ npm install @eidetic/ui
sql
SELECT * FROM users WHERE active = true;

Props

CodeBlock component API reference

PropTypeDefaultDescription
codestring—The code content to display (required)
languagestring—Programming language for syntax highlighting hint
filenamestring—Filename to display in header
variant'default' | 'light''default'Visual style variant
showLineNumbersbooleanfalseShow line numbers
startLineNumbernumber1Starting line number
highlightLinesnumber[][]Lines to highlight (1-indexed)
copyablebooleantrueShow copy button
maxHeightstring | number—Max height before scrolling
wrapLinesbooleanfalseWrap long lines instead of scrolling horizontally

Usage

Import and implementation example

import { CodeBlock } from '@/components/ui/code-block'

export default function Example() {
  const code = `function hello() {
  console.log('Hello!');
}`

  return (
    <CodeBlock
      code={code}
      language="javascript"
      filename="hello.js"
      showLineNumbers
      copyable
    />
  )
}

Features

Built-in functionality

  • Copy to clipboard: One-click copy with visual feedback
  • Line numbers: Optional line numbers with custom start
  • Line highlighting: Highlight specific lines of code
  • Filename header: Show filename with file icon
  • Language indicator: Display language hint in header
  • Max height: Scrollable container for long code
  • Word wrap: Optional line wrapping for long lines
  • 2 variants: Dark (default) and light themes
  • Dark mode: Full dark mode support

Accessibility

ARIA support

ARIA Attributes

aria-label on copy buttonaria-hidden on decorative icons

Keyboard Navigation

KeyAction
TabFocus the copy button
Enter / SpaceCopy code to clipboard

Notes

  • Copy button provides visual feedback ("Copied!")
  • Line numbers are marked as aria-hidden for screen readers
  • Semantic HTML structure with pre and code elements
  • High contrast text for readability

Related Components

AI Code BlockKbdCard