Prose Code Block

Prose Code Block shows code that belongs in a document: a fenced block in Markdown, or a code block a model generated in a chat reply. A shell holds the language and Copy; the code sits in a panel inside it.

It does not highlight syntax itself. Pass renderLine and codeClassName="honest-syntax" to color it with Honest Prose Syntax, as Markdown does. For a file an agent wrote or changed, with line numbers or a diff, use Code View.

Installing prose-code-block brings Button along as a registry dependency.

Copy

Copy puts the code on the clipboard and shows a check for a moment. If the browser refuses clipboard access, the block says "Copy failed" instead of pretending it worked. Copy is always visible, so it works with touch and keyboard as well as a pointer.

Actions

actions puts your own controls in the shell, before Copy. Pass a button for each action your application handles, such as downloading the file.

Long lines

Lines do not wrap. The panel scrolls sideways.

The block is a figure with the language or file name as its caption. The panel can take focus, so a keyboard user can scroll long lines, and it is named by the same label. Copy is an icon button named "Copy code", and it announces "Copied" or "Copy failed" through a polite status.

import { ProseCodeBlock } from "@/components/ai/prose-code-block"
import { SyntaxLine, useSyntax } from "@/lib/prose-syntax-react"

const syntax = useSyntax(code, "ts")

<ProseCodeBlock
  label="export.ts"
  code={code}
  codeClassName="honest-syntax"
  renderLine={(line, index) => (syntax?.lines[index] ? <SyntaxLine tokens={syntax.lines[index]} /> : line)}
/>

ProseCodeBlock

Accepts native figure props beyond those listed.