Documentation
Code Block
Displays code with syntax highlighting, language label, and copy functionality. Uses highlight.js for 50+ language support.
Installation
1import { CodeBlockComponent } from '@angular-ai-kit/core';Live Demo
TypeScript
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-example',
template: `<h1>{{ title() }}</h1>`,
})
export class ExampleComponent {
title = signal('Hello, World!');
}Configuration
Show Copy Button
Show Line Numbers
Features
- Syntax highlighting with highlight.js
- Language detection and labeling
- Copy button with visual feedback
- Optional line numbers
- Support for 50+ programming languages
API Reference
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
code | string | required | The code to display |
language | string | 'plaintext' | Programming language for syntax highlighting |
showCopyButton | boolean | true | Whether to show the copy button |
showLineNumbers | boolean | false | Whether to show line numbers |
customClasses | string | '' | Additional CSS classes |
Outputs
| Prop | Type | Default | Description |
|---|---|---|---|
copy | EventEmitter<string> | - | Emitted when code is copied to clipboard |
Usage Example
1<ai-code-block2 [code]="codeString"3 language="typescript"4 [showCopyButton]="true"5 [showLineNumbers]="false"6 (copy)="handleCopy($event)"7/>Accessibility
- Copy button has aria-label
- Language label for context
- Focus visible on copy button
- Keyboard accessible