CodeBlock
code-blockDisplays multiline code with an optional language label and copy action.
Usage
Basic usage
Pass in multiple lines of code (wrap with \n), automatic syntax coloring + copy button in the upper right corner.
<Lens zoom={1.8}>
<img src="/photo.jpg" />
</Lens>tsx
const code = `<Lens zoom={1.8}>
<img src="/photo.jpg" />
</Lens>`;
<CodeBlock code={code} />With language tag
lang Displays the language identifier in the upper left corner and affects coloring rules.
tsx
import { Button } from "@hulianui/ui";
// Click counting example
export function Demo() {
const [n, setN] = useState(0);
return <Button onClick={() => setN(n + 1)}> clicked {n} times</Button>;
}tsx
<CodeBlock code={code} lang="tsx" />Shell command
lang="bash" Colorize the command name according to Shell rules with flag.
bash
# Install and build
pnpm add @hulianui/ui
pnpm --filter @hulianui/ui buildtsx
<CodeBlock code={shell} lang="bash" />Coloring Off / Not Copyable
highlight={false} renders plain text; copyable={false} removes the copy button.
import { Button } from "@hulianui/ui";
// Click counting example
export function Demo() {
const [n, setN] = useState(0);
return <Button onClick={() => setN(n + 1)}> clicked {n} times</Button>;
}<Lens zoom={1.8}>
<img src="/photo.jpg" />
</Lens>tsx
<>
<CodeBlock code={code} highlight={false} />
<CodeBlock code={code} copyable={false} />
</>When to use
Use CodeBlock for multiline snippets with built-in syntax coloring, a language label, and one-click copy. Use Snippet for a single-line command or identifier, Code for inline code, or CodeDiff for before-and-after changes.
Import
ts
import { CodeBlock, HighlightedCode, tokenizeCode, type CodeToken, type CodeTokenType } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| code* | string | — | Code text; use \n for multiple lines. |
| lang | string | — | Language label shown in the upper-right corner, such as "tsx". It also selects JavaScript-family or shell highlighting rules. |
| copyable | boolean | true | Whether to show the copy button. |
| highlight | boolean | true | Whether to apply syntax coloring; disable it for plain text. |
| className | string | — | Additional class name for the container. |
Usage guidelines
No component-specific caveats are currently documented.
Related
Playground
tsx
import { Button } from "@hulianui/ui";
// Click counting example
export function Demo() {
const [n, setN] = useState(0);
return <Button onClick={() => setN(n + 1)}> clicked {n} times</Button>;
}<CodeBlock code={code} lang="tsx" />