CodeBlock

Usage

Pass plain source text to code. language supplies a recognizable badge; lang is an optional display-label override, not the document locale. wrap allows long lines to wrap; otherwise the code body scrolls horizontally. density changes spacing. Code is escaped text: this component does not execute it or apply syntax highlighting.

Examples

Try the interaction and open Code for the complete implementation.

const greeting = 'Hello, Neural UI';
console.log(greeting);

Try and configure

Change the options, try the result and see the template update. Code contains the full executable example.

const greeting = 'Hello, Neural UI';
console.log(greeting);

<neu-code-block
  [code]="code()"
  language="typescript"
  density="normal"
  [wrap]="true"
  [copiedAriaLabel]="'Example code copied'"
  [copiedLabel]="'Copied'"
  [copyAriaLabel]="'Copy example code'"
  [copyLabel]="'Copy code'"
/>

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

export const code = signal("const greeting = 'Hello, Neural UI';\nconsole.log(greeting);");

Data and content

The copy button writes the exact code string to the clipboard and confirms only a successful copy. Labels can be translated. CodeBlock has no Outputs or Templates; supply code and style it with its public tokens.

Accessibility and keyboard

Reach the copy button with Tab and activate it with Enter or Space. Keep copyAriaLabel and copiedAriaLabel meaningful, especially when using short visible labels. Wrapped code is useful on narrow screens; unwrapped source has local horizontal scrolling.

API

Inputs and Outputs match the installed package. Named types link to definitions. Every available Template has a Demo and Code example.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Public Types

Open a type to inspect its definition and interface fields.

import type { NeuDensity } from '@neural-ui/core';

// Public declaration (reference only)
type NeuDensity = 'compact' | 'normal' | 'relaxed';

Styles and tokens

Customize supported public tokens and check both themes. Example illustrations and application state are not Core inputs.

Related components

Use related components to complete your interface.

• Panel
• Card