Components / Code Block
Code Block
Syntax-highlighted code display with filename tab, language chip, copy button, line numbers, and optional collapse for long blocks.
typographyv0.1.0
Playground
Examples
TypeScript with filename
<cg-code-block></cg-code-block>Minimal (no filename)
<cg-code-block></cg-code-block>Collapsible long block
<cg-code-block collapsible line-numbers></cg-code-block>Import
import { CgCodeBlock } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-code-block';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
code | string | — | Code content |
language | string | — | Language label (also used for syntax highlighting heuristics) |
filename | string | — | Filename shown in the header tab |
line-numbers | boolean | false | Show line numbers gutter |
wrap | boolean | false | Soft-wrap long lines instead of horizontal scroll |
collapsible | boolean | false | Collapse blocks longer than 15 lines with a "Show all" affordance |
rounded | "none" | "sm" | "md" | "lg" | "lg" | Border radius variant |