Code Block

A lightweight code display component with optional line numbers, copy-to-clipboard, and language badge. Consumers integrate their own syntax highlighter.

Basic Example

const greeting = 'Hello, world!';

With Line Numbers

1function fibonacci(n) {
2  if (n <= 1) return n;
3  return fibonacci(n - 1) + fibonacci(n - 2);
4}

With Title

export default function App() { return <h1>Hello</h1>; }

Without Copy Button

npm install @loworbitstudio/visor-core

Installation

npx visor add code-block

This copies two files into your project:

components/ui/code-block/code-block.tsx — the component
components/ui/code-block/code-block.module.css — the styles

Usage

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

export default function Example() {
  return (
    <CodeBlock
      code="const greeting = 'Hello, world!';"
      language="typescript"
    />
  );
}

API Reference

CodeBlockProps

Prop	Type	Default	Description
`code`*	`string`	—	The raw code string to display.
`language`	`string`	—	Language label displayed as a badge in the header.
`showLineNumbers`	`boolean`	`false`	Show line numbers alongside the code.
`showCopyButton`	`boolean`	`true`	Show a copy-to-clipboard button in the header.
`title`	`string`	—	Optional title (e.g., filename) displayed in the header.
`children`	`React.ReactNode`	—	Pre-highlighted content to render instead of raw code lines.
`className`	`string`	—	Additional CSS class names to merge onto the element.

The component also accepts all standard <div> HTML attributes.

Syntax Highlighting

This component intentionally ships without a syntax highlighter. To integrate Shiki, Prism, or any other highlighter, pass pre-highlighted markup as children:

import { codeToHtml } from 'shiki';

const highlighted = await codeToHtml(code, {
  lang: 'tsx',
  theme: 'github-dark',
});

// Pass highlighted HTML as children — it replaces the raw code rendering
<CodeBlock code={code} language="tsx">
  <div>{/* render your highlighted output here */}</div>
</CodeBlock>

Accessibility

The code container uses a <pre> element with <code> inside, which is the semantic standard for code blocks.
The copy button includes an accessible label. When copied, the button text changes to "Copied!" as visual feedback.
Set a title prop to help screen reader users identify the file or context of the code block.
The language badge is decorative; no ARIA role is required.

Code Block

On this page