A code-block UI component and utilities

Basic Usage

Render a syntax-highlighted code block with no extra configuration needed.

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

Add a title to the code block to display a filename or label in the header bar.

MyButton.tsx

export default function MyButton() {
  return (
    <button className="rounded bg-blue-500 px-4 py-2 text-white">
      Click me
    </button>
  );
}

Line Numbers

Enable lineNumbers to show line numbers on the left side of the code block.

export default function MyButton() {
  return (
    <button className="rounded bg-blue-500 px-4 py-2 text-white">
      Click me
    </button>
  );
}

Notation Diff

Use [!code --] and [!code ++] comments to mark removed and added lines with colored backgrounds.

export default function MyButton() {
  return (
    <button className="rounded bg-blue-500 px-4 py-2 text-white"> 
    <button className="rounded bg-neutral-800 dark:bg-neutral-200 px-4 py-2 text-black dark:text-white"> 
      Click me
    </button>
  );
}

Notation Focus

Use [!code focus] to dim all lines except the focused one, drawing attention to a specific part of the code.

export default function MyButton() {
  return (
    <button className="rounded bg-blue-500 px-4 py-2 text-white">
      Hover me 
    </button>
  );
}

Meta Highlight

Pass line numbers in the meta string (e.g. {3,4} or {3-5}) to highlight specific lines with a background color.

export default function MyButton() {
  return (
    <button className="rounded bg-blue-500 px-4 py-2 text-white">
      Click me
    </button>
  );
}

Word Highlight

Wrap a word or phrase in /slashes/ in the meta string to highlight every occurrence of that token in the block.

export default function MyButton() {
  return (
    <button className="rounded bg-blue-500 px-4 py-2 text-white">
      Click me
    </button>
  );
}

Word Wrap

Long lines wrap automatically inside the container instead of overflowing horizontally — no meta string required.

export default function MyButton() {
  return (
    <button className="rounded bg-blue-500 px-4 py-2 text-white transition-colors duration-200 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none">
      Click me
    </button>
  );
}

Line Anchors

Each line gets a unique id and data-line attribute, enabling deep-linking directly to a specific line via the URL hash.

export default function MyButton() {
  return (
    <button className="rounded bg-blue-500 px-4 py-2 text-white">
      Click me
    </button>
  );
}

Build beautiful code blocks