Overview
tng-code-block displays code with optional syntax highlighting and line numbers. Bind [content] (or project text), set language, and optionally pass a highlighter (e.g. Shiki adapter). Copy is built-in; use slots [tngCopy] and [tngCopied] for custom copy/copied UI.
Quick example
Basic
<tng-code-block [content]="snippet()" language="typescript">
</tng-code-block>
import { TngCodeBlock } from '@tailng-ui/ui/utilities';
snippet = computed(() => `const x = 1;`);const greeting = 'Hello, tailng';
console.log(greeting);Features
Content & language
content input or projected text; language for highlighting (e.g. typescript, json, text). Optional highlighter service.
Line numbers & wrap
showLineNumbers, wrap. Styling: use the slot input (container, body, gutter, pre, code, copyWrapper).
Copy
Built-in copy button; showCopy, copyVariant, copySize, copyResetMs. Project [tngCopy] / [tngCopied] for custom copy UI.