Mischief

39 / Code

Code Block

A code panel with copy, optional line numbers, highlighted lines, and a collapse for anything long.

Live previewSource
route.ts
import { rateLimit } from "./limiter" export async function POST(request: Request) {  const allowed = await rateLimit(request)   if (!allowed) {    return Response.json({ error: "Slow down" }, { status: 429 })  }   const body = await request.json()  return Response.json({ ok: true, body })}

Installation

Copy the source into your project, or keep it behind a package.

npx shadcn@latest add Tinkerers-Labs/mischief-ui/code-block
import { CodeBlock } from "mischief-ui/code-block"

Usage

export function Snippet() {
  return (
    <CodeBlock
      code={source}
      filename="server.ts"
      showLineNumbers
      highlightLines={[4, 5]}
      maxLines={12}
    />
  )
}

API

codestringThe source to render. A single trailing newline is dropped.
filenamestringShown in the header, and preferred over language.
languagestringA short label such as tsx, used when there is no filename.
showLineNumbersbooleanAdds a gutter sized to the highest line number.
highlightLinesnumber[]One-based lines to mark as the interesting ones.
maxLinesnumberCollapses anything past this many lines behind a toggle.
wrap, wrappableboolean, booleanWrap long lines, and offer a control that overrides it.
copyablebooleanShows the copy control. Defaults to true.
actionsReactNodeExtra controls placed in the header.

Accessibility

The code region is focusable so it can be scrolled from the keyboard. Copying announces itself through a polite live region, and the copy control renames itself once it succeeds. Line numbers and the diff-style gutter are aria-hidden, so a screen reader reads the source rather than the decoration. There is no syntax highlighting and no highlighting dependency.

Dependencies

  • lucide-react