Code block
Read-only source starts collapsed and opens from its header button.
Loading interactive example
Choose CodeBlock for read-only code that readers may need to copy. The code body fades in when opened. The native hidden state closes it immediately. highlightLines uses one-based source line numbers and ignores invalid or duplicate entries. The highlighter receives the complete source; return its original text and newlines with inline styles that preserve text metrics. Copy always uses the original source.
API
| Member | Type | Kind | Required | Default |
|---|---|---|---|---|
code | string | prop | Yes | |
copyLabel | string | prop | No | 'Copy code' |
copyable | boolean | prop | No | true |
filename | string | prop | No | undefined |
highlight | (code: string, language: string) => string | callback | No | undefined |
highlightLines | readonly number[] | prop | No | [] |
label | string | prop | No | undefined |
language | CodeLang | (string & {}) | prop | No | 'text' |
maxHeight | number | prop | No | undefined |
open | boolean | binding | No | false |
showLineNumbers | boolean | prop | No | false |
wrap | boolean | prop | No | false |
Examples
Source
Loading source