Code Editor

The ownable Code Editor install gives your app local control over the native textarea, synchronized highlighting overlay, and adapter configuration.

Why own Code Editor locally

Choose languages and themes without bundling a highlighter into the component.
Add product-specific commands while preserving the native editing surface.
Adjust editor dimensions and tokens alongside application layouts.

What the install includes

The registry writes the component, overlay template, styles, local highlighting contract, and export barrel. It does not install Shiki or another highlighting engine.

Ownable Install

Install Code Editor from the TailNG registry with the shadcn-like flow. This copies source files into your app so your team can own and evolve the implementation locally.

Install from registry

Run from your Angular workspace root.

pnpm dlx tailng add code-editor

npx tailng add code-editor

Generated files

The command scaffolds local files under src/app/tailng-ui/code-editor.

src/app/tailng-ui/code-editor/tng-code-highlighting.ts
src/app/tailng-ui/code-editor/tng-code-editor.ts
src/app/tailng-ui/code-editor/tng-code-editor.html
src/app/tailng-ui/code-editor/tng-code-editor.css
src/app/tailng-ui/code-editor/index.ts

Import in your feature module/component

import { TngCodeEditor, provideTngCodeHighlighting } from './tailng-ui/code-editor';

Usage

<tng-code-editor
  language="python"
  adapter="shiki"
  ariaLabel="Python source"
  [value]="source"
  (valueChange)="source = $event"
></tng-code-editor>