Component

Code Block

Code block with syntax highlighting, language indicator and clipboard copy button. All visible texts are configurable for internationalization.

import { NeuCodeBlockComponent } from '@neural-ui/core/code-block';

TypeScript

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

@Component({
  selector: 'app-root',
  template: `<h1>{{ title() }}</h1>`
})
export class AppComponent {
  title = signal('NeuralUI');
}

HTML

<neu-stats-card
  title="Revenue"
  value="$48,295"
  change="+12.5%"
  trend="up"
  [sparkData]="data"
/>

SCSS

.my-component {
  display: flex;
  gap: var(--neu-space-4);
  padding: var(--neu-space-6);
  background: var(--neu-surface);
  border-radius: var(--neu-radius-lg);
}

import { NeuCodeBlockComponent } from '@neural-ui/core/code-block';

@Component({
  imports: [NeuCodeBlockComponent],
  template: `
    <neu-code-block [code]="snippet" lang="TypeScript" />
  `
})
export class MyComponent {
  snippet = `const x = 1;`;
}