React CodeBlock: examples and API

Preview

Live preview

Changes apply to this preview only.

1// Before
2theme="light"
3
4// After
5theme={{ mode: "light" }}

Width adapts to the available space

"use client";

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  Badge,
  CardContent,
  CodeBlock
} from "@pimolu/react";

export function DemoExample() {
  return (
    <Card>
      <CardHeader>
        <div className="flex flex-wrap items-center gap-3 min-w-0 justify-between">
          <div>
            <CardTitle>Migration notes</CardTitle>
            <CardDescription>
              How a documentation page can frame a code sample.
            </CardDescription>
          </div>
          <Badge variant="primary" appearance="soft">v1.4</Badge>
        </div>
      </CardHeader>
      <CardContent>
        <CodeBlock
          code={`// Before
theme="light"

// After
theme={{ mode: "light" }}`}
          language="ts"
          filename="migration.ts"
          showLineNumbers
          highlightLines={[4]}
        />
      </CardContent>
    </Card>
  );
}

More examples

Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.

Documentation sample

File name, language label, line numbers, highlighted lines and copy feedback.

Open preview

Languages

Every supported language shares the same surface; only the token rules differ.

Open preview

Long lines, height and wrapping

Without wrap, the code area scrolls horizontally. maxHeight caps the vertical scroll; wrap breaks long lines instead.

Open preview

Usage

Display the exact working source and choose wrapping or scrolling for long lines.

API reference

Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.

PimoluCodeBlockProps

Type source

PimoluCodeBlockProps public API
Name	Type	Default	Description
`code`Required	`string`	—	Raw source. It is always rendered as text, never as HTML.
`language`	`"text" \| "html" \| "ts" \| "tsx" \| "js" \| "jsx" \| "css" \| "json" \| "bash" \| undefined`	`"ts"`	Language used for the label and the tokenizer. Defaults to "ts".
`filename`	`string \| undefined`	—	Optional file name shown next to the language label.
`showLineNumbers`	`boolean \| undefined`	`false`	Prefix each line with its 1-based number. Defaults to false.
`copyable`	`boolean \| undefined`	`true`	Render the copy button. Defaults to true.
`copyLabel`	`string \| undefined`	`"Copy"`	Copy button label while idle. Defaults to "Copy".
`copiedLabel`	`string \| undefined`	`"Copied"`	Copy button label and live message after a successful copy.
`highlightLines`	`readonly number[] \| undefined`	—	1-based line numbers to emphasise.
`maxHeight`	`string \| number \| undefined`	—	Cap the scrollable code area. Numbers are read as pixels.
`wrap`	`boolean \| undefined`	`false`	Wrap long lines instead of scrolling horizontally. Defaults to false.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element> \| undefined`	—	Standard React/HTML attribute.
`defaultValue`	`string \| number \| readonly string[] \| undefined`	—	Standard React/HTML attribute.
`className`	`string \| undefined`	—	Standard React/HTML attribute.
`style`	`CSSProperties \| undefined`	—	Standard React/HTML attribute.
`aria-label`	`string \| undefined`	—	Defines a string value that labels the current element.
`onClick`	`MouseEventHandler<HTMLDivElement> \| undefined`	—	Standard React/HTML attribute.

codeRequired: string
No default extracted.
Raw source. It is always rendered as text, never as HTML.
language: "text" | "html" | "ts" | "tsx" | "js" | "jsx" | "css" | "json" | "bash" | undefined
Default: "ts"
Language used for the label and the tokenizer. Defaults to "ts".
filename: string | undefined
No default extracted.
Optional file name shown next to the language label.
showLineNumbers: boolean | undefined
Default: false
Prefix each line with its 1-based number. Defaults to false.
copyable: boolean | undefined
Default: true
Render the copy button. Defaults to true.
copyLabel: string | undefined
Default: "Copy"
Copy button label while idle. Defaults to "Copy".
copiedLabel: string | undefined
Default: "Copied"
Copy button label and live message after a successful copy.
highlightLines: readonly number[] | undefined
No default extracted.
1-based line numbers to emphasise.
maxHeight: string | number | undefined
No default extracted.
Cap the scrollable code area. Numbers are read as pixels.
wrap: boolean | undefined
Default: false
Wrap long lines instead of scrolling horizontally. Defaults to false.
onChange: ChangeEventHandler<HTMLDivElement, Element> | undefined
No default extracted.
Standard React/HTML attribute.
defaultValue: string | number | readonly string[] | undefined
No default extracted.
Standard React/HTML attribute.
className: string | undefined
No default extracted.
Standard React/HTML attribute.
style: CSSProperties | undefined
No default extracted.
Standard React/HTML attribute.
aria-label: string | undefined
No default extracted.
Defines a string value that labels the current element.
onClick: MouseEventHandler<HTMLDivElement> | undefined
No default extracted.
Standard React/HTML attribute.

Accessibility

Keep code readable at zoom and confirm that copy feedback is announced without moving focus.

Read the accessibility guide →

Preview

Migration notes

More examples

Documentation sample

Languages

Long lines, height and wrapping

Usage

API reference

PimoluCodeBlockProps

Accessibility

Related components