Code block
@xui/code-blockA code sample: pre-tokenised, copyable, optionally numbered, wrapped and tabbed. It never tokenises — highlighting arrives already classified, from whatever knows the language, and each run renders as a text node under a class this package chose, so no grammar ships to the browser and a highlighted sample still follows the active theme.
Install
pnpm add @xui/code-block Add the barrel to a standalone component's imports:
import { XuiCodeBlockImports } from '@xui/code-block';@Component({ imports: [XuiCodeBlockImports], // …})Examples
Default
Loading preview…
<xui-code-block [code]="sample" size="md" [showLineNumbers]="false" [wrap]="false" [copyable]="true" />With filename
Loading preview…
<xui-code-block [code]="sample" size="md" [showLineNumbers]="false" [wrap]="false" [copyable]="true" filename="counter.ts" language="ts" />Line numbers and highlights
Loading preview…
<xui-code-block [code]="sample" [highlightLines]="lines" showLineNumbers size="md" [wrap]="false" [copyable]="true" />Pre tokenised
Loading preview…
<xui-code-block [code]="sample" [tokens]="tokens" filename="counter.ts" showLineNumbers />Wrapped
Loading preview…
<xui-code-block [code]="sample" wrap size="md" [showLineNumbers]="false" [copyable]="true" />Tabs
Loading preview…
<xui-code-block [tabs]="tabs" size="md" [showLineNumbers]="false" [wrap]="false" [copyable]="true" />Sizes
Loading preview…
<div class="flex flex-col gap-4"> <xui-code-block size="sm" [code]="sample" /> <xui-code-block size="md" [code]="sample" /> <xui-code-block size="lg" [code]="sample" /></div>Custom copy action
Source only — this one needs a component of its own to run, so there is nothing to render here.
<xui-code-block [code]="sample" size="md" [showLineNumbers]="false" [wrap]="false" [copyable]="true"> <ng-template xuiCodeBlockCopy let-copy let-copied="copied"> <button xuiButton size="sm" variant="outline" class="absolute end-2 top-2" (click)="copy()"> {{ copied ? 'Copied!' : 'Copy' }} </button> </ng-template></xui-code-block>API
Replaces the copy button in the corner of a xui-code-block.
A code sample: pre-tokenised, copyable, optionally numbered, wrapped and tabbed.
Variants
sizemdwrapfalseInputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''codestringThe sample as text. Always what the copy button writes, and what is rendered when tokens is absent. Leading and trailing blank lines are dropped, so a template literal does not open with an empty row.''tokensreadonly XuiCodeLine[] | nullThe sample already classified, one entry per line. Wins over code for rendering; code still supplies the text that gets copied, so keep the two in step.nulllanguagestring | nullLanguage label for the header, and data-language on the <pre>. Purely informational.nullfilenamestring | nullFile name shown above the sample. Ignored when tabs is set — a tab's label is its file.nullhighlightLinesreadonly number[]Line numbers to call out, 1-based.[]showLineNumbersbooleanShow the line-number gutter.this.config.showLineNumberswrapbooleanWrap long lines instead of scrolling them sideways.this.config.wrapsizeXuiCodeBlockVariants['size']Type scale of the sample.this.config.sizetabsreadonly XuiCodeTab[]Several files behind one tab strip. When set, code, tokens and filename are ignored and the copy button follows the selected tab.[]copyablebooleanRender the copy control. Off for samples that are not meant to be taken away.truecopyLabelstringAccessible name of the copy button before a copy.'Copy code'copiedLabelstringAccessible name of the copy button while the tick is showing.'Copied'activeTabstring | nullThe selected tab's label. Two-way bindable with [(activeTab)].nullOutputs
copiedstringEmits the text that was written to the clipboard. A failed write emits nothing.