Components / Code Block

Code Block

Focusable LTR source, terminal output and diffs with optional numbering and copy actions.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>Aevko UI</h1>',
})
export class App {}

example.component.html

html

<aevko-code-block>
  <aevko-code-block-header>
    app.component.ts
    <button aevkoCodeBlockCopy [value]="source">
    </button>
  </aevko-code-block-header>
  <aevko-code-block-content [code]="source" language="typescript" [lineNumbers]="true" />
</aevko-code-block>

Installation

npx aevko-ui@latest add code-block --yes

Source ownership

Customization

Use plain text by default and project highlighted lines only when needed. Syntax highlighting stays optional and outside the base install.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

API reference

Property or slot	Type	Default	Description
`variant`	`'default' \| 'destructive'`	`'default'`	Surface tone.
`size`	`'default' \| 'sm'`	`'default'`	Content density.
`code / language`	`string`	`'' / 'text'`	Plain source and language metadata.
`lineNumbers / startLine`	`boolean / number`	`false / 1`	Optional non-selectable gutter.
`wrap`	`boolean`	`false`	Wraps long lines instead of horizontal scrolling.
`line variant`	`'default' \| 'added' \| 'removed' \| 'highlighted'`	`'default'`	Optional per-line emphasis.
`copy value`	`string`	`required`	Exact text written to the clipboard.

Accessibility contract

Accessibility

Included behavior

The code viewport is keyboard-focusable, always reads LTR and excludes visual line numbers from selection.

Your responsibility

Provide an accurate language/title, cap very long output and ensure copy actions expose an accessible label.

Back to all components