Code Block

Usage

import { CodeBlock } from '@wdzyi/ui';

<CodeBlock
  files={[
    { name: 'format.ts', code: source, highlight: [4] },
    { name: 'fold.css', code: styles },
    { name: 'format.ts', code: patch, diff: true },
  ]}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

filesCodeBlockFile[]

Each has a name for its tab, the code, the lines to pick out by number, and the first line’s number. Mark one diff to read its code as a unified diff.

defaultFilenumber = 0

The file open at first.

onFileChange(index: number) => void

Called when another tab is chosen.

wrapboolean = true

Long lines wrap. Off, they run on and the code scrolls sideways.

numbersboolean = true

The line numbers down the side.

onCopy(text: string) => void

Called with what was copied.

labelsPartial<CodeBlockLabels>

The words on it: copy, copied, and files, which names the tabs for screen readers.

Notes

• The colouring is a small tokeniser in the file, for scripts and CSS, in the same colours as this site’s code. Any other file is left plain, so it can’t be coloured wrongly.
• A diff is written as a patch is, each line starting with +, - or a space. Each run of removals is paired with the additions after it, and what changed between them is marked, out to whole words.
• Copy takes the file as it is, or the new side of a diff. The tabs move with the arrow keys, and the code takes focus, so it scrolls from the keyboard too.
• It fills the width it’s given. Give it a height as well and the code scrolls inside it, under a header that stays put, and fades at the foot while there’s more below.
• With reduced motion, the lines are simply there, without the cascade.