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 |
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