docs

API reference

The wrapper owns rendering, copy feedback, and line treatment for you while still exposing the headless slot contract underneath.

Wrapper component

<tng-code-block
  title="review.ts"
  language="ts"
  [code]="snippet"
  [lineNumbers]="true"
  [highlightLines]="[3, [4, 4]]"
  [focusLines]="true"
  [wrap]="true"
  [copy]="true"
  caption="Focused review shell"
></tng-code-block>

Rendering and copy inputsInput / outputTypeNotes
codestringSource content rendered inside the wrapper shell.
title, caption, variantstring | null, 'default' | 'compact' | 'ghost'Header copy and overall wrapper presentation.
language, adapter, themestring | nullLanguage metadata and adapter selection for highlighted rendering.
lineNumbers, startingLineNumber, showLineNumbersboolean | 'auto', number, boolean | undefinedLine-number visibility and numbering offset.
highlightLines, focusLines, wrap, maxHeightArray<number | [number, number]>, boolean, boolean, string | number | nullLine emphasis, dimming, wrapping, and scrollable height control.
highlight, highlightMode, sanitizeHtmlboolean, 'auto' | 'off' | 'on', boolean | 'auto'Controls whether adapter output is used and how incoming HTML is treated.
copy, copyText, copyLabel, copiedLabel, errorLabelboolean | 'auto', string | ((ctx) => string) | null, stringClipboard action visibility, payload override, and button labels.
copy, copySuccess, copyError, renderStateChange, tngCopied, tngCopyErrorOutputsClipboard lifecycle events plus render-state notifications.

Input / output	Type	Notes
`code`	`string`	Source content rendered inside the wrapper shell.
`title`, `caption`, `variant`	`string \| null`, `'default' \| 'compact' \| 'ghost'`	Header copy and overall wrapper presentation.
`language`, `adapter`, `theme`	`string \| null`	Language metadata and adapter selection for highlighted rendering.
`lineNumbers`, `startingLineNumber`, `showLineNumbers`	`boolean \| 'auto'`, `number`, `boolean \| undefined`	Line-number visibility and numbering offset.
`highlightLines`, `focusLines`, `wrap`, `maxHeight`	`Array<number \| [number, number]>`, `boolean`, `boolean`, `string \| number \| null`	Line emphasis, dimming, wrapping, and scrollable height control.
`highlight`, `highlightMode`, `sanitizeHtml`	`boolean`, `'auto' \| 'off' \| 'on'`, `boolean \| 'auto'`	Controls whether adapter output is used and how incoming HTML is treated.
`copy`, `copyText`, `copyLabel`, `copiedLabel`, `errorLabel`	`boolean \| 'auto'`, `string \| ((ctx) => string) \| null`, `string`	Clipboard action visibility, payload override, and button labels.
`copy`, `copySuccess`, `copyError`, `renderStateChange`, `tngCopied`, `tngCopyError`	Outputs	Clipboard lifecycle events plus render-state notifications.

Primitive foundation

Under the hood the wrapper uses the headless codeblock directives for the root, header, body, gutter, and code regions. Reach for the headless page when you want to author that shell yourself.

<section tngCodeBlock>
  <header tngCodeBlockHeader>...</header>
  <div tngCodeBlockBody>
    <ol tngCodeBlockGutter aria-hidden="true"></ol>
    <pre><code tngCodeBlockCode>...</code></pre>
  </div>
</section>