Installation
Section titled “Installation”- Package
@bigbang/ui- Import
import { CodeBlock } from '@bigbang/ui';- Source
- CodeBlock.tsx
- Storybook
- CodeBlock · Playground
CodeBlock is in the @bigbang/ui package. It needs no syntax-highlighting library.
import { CodeBlock } from '@bigbang/ui';
<CodeBlock title="config.json" language="json" lineNumbers code={source} />;codeRequired- Description
- The code, shown as written. Leading and trailing blank lines are removed.
- Type
string
language- Description
- Language name shown in the header, such as
tsxorjson. Display only; no syntax colouring. - Type
string
title- Description
- File name or short title shown in the header; also names the scroll region.
- Type
string
lineNumbers- Description
- Shows line numbers. Screen readers skip them, and they are not copied.
- Type
boolean- Default
false
highlightLines- Description
- One-based line numbers to highlight.
- Type
readonly number[]
wrap- Description
- Wraps long lines instead of scrolling sideways.
- Type
boolean- Default
false
copyable- Description
- Shows a copy button that copies the whole code.
- Type
boolean- Default
true
copyLabel- Description
- Accessible name of the copy button. Without it,
ui.code-block.copy("Kodu kopyala" or "Copy code"). - Type
string
className- Description
- Added to the root element; use it for layout only.
- Type
string
Data attributes
Section titled “Data attributes”data-component="code-block": on the root.data-part:header,language,copy,scroll,line,line-number.data-highlighted: on a highlighted line.