Code Block
Monospace code snippets with an optional filename/language header, line numbers, and a one-click copy button.
function greet(name: string): string {
return `Hello, ${name}!`;
}
console.log(greet('Zyra'));
API
All inputs and configuration options for zyra-code-block.
| Prop | Type | Default | Description |
|---|---|---|---|
code | string | '' | The source text to display |
language | string | '' | Label shown in the header (display only, no syntax coloring) |
filename | string | '' | Filename shown in the header |
lineNumbers | boolean | false | Shows a numbered gutter beside each line |
copyable | boolean | true | Shows the copy-to-clipboard button in the header |
Tokens
CSS custom properties zyra-code-block reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Background--zyra-color-code-block-bg | var(--zyra-color-surface-code) | Fill color of the code area. Tuned per theme, deliberately darker than the default surface. |
Border--zyra-color-code-block-border | var(--zyra-color-primary-border) | Border color of the whole block. |
Header background--zyra-color-code-block-header-bg | var(--zyra-color-surface-inset) | Fill color of the filename/language/copy-button header row. |
Keyword--zyra-color-code-keyword | var(--zyra-color-accent-secondary) | Syntax color for language keywords. |
Tag--zyra-color-code-tag | var(--zyra-color-primary) | Syntax color for markup tags. |
Attribute--zyra-color-code-attr | var(--zyra-color-accent-tertiary) | Syntax color for HTML/JSX attributes. |
String--zyra-color-code-string | var(--zyra-color-success-foreground) | Syntax color for string literals. |
Number--zyra-color-code-number | var(--zyra-color-warning-foreground) | Syntax color for numeric literals. |
Comment--zyra-color-code-comment | var(--zyra-color-foreground-subtle) | Syntax color for comments. |
Punctuation--zyra-color-code-punct | var(--zyra-color-foreground-muted) | Syntax color for brackets, semicolons, and other punctuation. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- The copy button updates its aria-label between "Copy code" and "Copied" as state changes
- Code is rendered in a <pre><code> block so screen readers announce it as preformatted text