Code Block

Demo & usage

More examples

<sv-code-block variant="tabs" [files]="files" (tabChange)="onTab($event)" />

<sv-code-block
  variant="diff"
  diffMode="split"
  [hunks]="hunks"
  [reviewable]="true"
  (hunkAction)="onHunk($event)" />

<sv-code-block [code]="buffer()" [streaming]="!done()" [wrap]="true" />

<sv-code-block variant="terminal" [terminalLines]="lines" [showHeader]="false" />

<!-- render 200 lines, with the rest one button away -->
<sv-code-block [code]="hugeFile" [maxRenderedLines]="200" />

<!-- no cap at all -->
<sv-code-block [code]="hugeFile" [maxRenderedLines]="0" />

import { svDiffLines } from '@styloviz/core';

readonly diff = computed(() => svDiffLines(this.before(), this.after(), {
  context: 3,
  ignoreWhitespace: true,
}));

// <sv-code-block variant="diff" [hunks]="diff().hunks" diffMode="split" />

// diff().summary is "3 changes, 12 lines added, 4 lines removed."
// diff().tooDifferent is true when the two texts were too unrelated to compare
// line by line — Myers is quadratic on unrelated input, and a frozen tab is
// worse than a refusal that says so.

When to use

• Rendering AI-generated code in a chat, artifact panel or completion.
• Documenting an API response, config file or install command in an admin UI.
• Showing a proposed edit for review, with per-hunk accept and reject.
• Displaying CI logs or agent tool output as a terminal transcript.

Async states

None — this component has nothing to load, so it has no loading, empty or error state to drive.

Outputs

Customization & theming

• Four variants: `block`, `tabs` (multi-file), `diff` (`unified` / `split`) and `terminal`.
• Nine languages — typescript, javascript, html, css, json, bash, python, go, rust — inferred from the file extension or set via `language`. An extension with no rules degrades to plain monospace and says so rather than passing for a language that simply used no keywords.
• Zero third-party dependencies: the highlighter is a small rule-based tokenizer that emits a token model, so the template renders it through Angular bindings — no `innerHTML`, no `bypassSecurityTrust*`.
• Streaming-safe — `tokenize()` is pure, so re-running it on a growing buffer is cheap; `streaming` adds a caret after the last line. Half-received literals are handled explicitly: an unterminated string, template literal or block comment tokenises as what it is opening, so the colours do not rearrange themselves when the closing quote lands.
• `maxRenderedLines` (default 600, `0` disables) caps how many lines are drawn in the `block` and `tabs` variants; the rest is one button away, below the scroll region. A cap rather than virtualisation — a windowed scroller has to own scroll position, row height and gutter alignment, and it breaks find-in-page for the rows it has not built. Copy is never truncated.
• Terminal text is passed through an ANSI stripper, so a transcript pasted from real tool output renders as text instead of `[31m` fragments. Escapes are stripped rather than interpreted: `TerminalLine.kind` already drives the colour, and honouring an SGR code would mean two sources of truth for one pixel.
• Toggle `lineNumbers`, `wrap`, `showHeader` and `copyable`; emphasise rows with `highlightLines`; cap the scroll region with `maxHeight` and its content with `maxRenderedLines`.
• Emits `copied` (the copied text), `tabChange` (the selected file) and `hunkAction` (accept / reject with the hunk), so a host can wire it to real behaviour.
• Icons come from `@styloviz/icons` (`sv-copy-icon`, `sv-check-icon`) — restyle or swap them by theming the icon library.
• The exported `tokenize()`, `inferLanguage()`, `revealBidi()` and `stripAnsi()` helpers are public, so you can reuse the highlighter — and its two text-safety passes — outside the component.

Best practices

• Do: Set `filename` — it drives language inference, the header label and the accessible name of the scroll region.
• Do: Use `variant="diff"` with `reviewable` when the user is expected to act on a change, and handle `hunkAction` to apply it.
• Don't: Do not use it for editable code — it is display-only. Reach for the Rich Text Editor or a dedicated code editor instead.
• Don't: Do not paste untrusted HTML expecting it to render — the component renders a token model as text, never as markup.
• Don't: Do not assume one copy button means one thing. What it takes depends on the variant — the updated side of a diff, the transcript without its `$` prompt, the open tab only — so the button says which in its `aria-label` and `title`. If you replace it, say the same thing.
• Tip: Set `wrap` for streaming output so the panel never scrolls sideways while tokens arrive.
• Tip: Cap the panel with `maxHeight` inside dense dashboards; the body scrolls and stays keyboard-reachable.
• Tip: Lower `maxRenderedLines` when a panel is one of many on a page, and set `0` only when you know the source is small. A 12,000-line file otherwise pays for 12,000 rows and every token span in them on first paint.
• Tip: Leave `language` unset unless you need to override inference. Setting it to `plaintext` is read as a request for plain text and suppresses the "not syntax highlighted" notice a genuine fallback shows.

Accessibility

• The scrollable body is a `role="region"` with `tabindex="0"` and an accessible name from `ariaLabel` or the file name, so keyboard users can reach and scroll it.
• The tab strip is a true `role="tablist"` with `aria-selected`, roving `tabindex`, and Arrow / Home / End navigation.
• The copy button states what it will actually copy, in both `aria-label` and `title`: the updated side of a diff without the `+` / `−` markers, the transcript without the `$` prompt, the open tab only, or the code without the line numbers. One icon meaning four different things is not guessable, and every one of those answers is something a person pastes into a terminal. Success is announced through an `aria-live="polite"` status region.
• When highlighting falls back, it says so. An extension the highlighter has no rules for renders a "plain text" badge and an `sr-only` "Not syntax highlighted: no rules for .rb. Shown as plain text." linked as the region's description — the failure mode of a highlighter is silence, so it has to announce itself. An explicit `language="plaintext"`, or a name with no extension, is a request rather than a fallback and stays quiet.
• The body is pinned `dir="ltr"`. Source reads left-to-right whatever it contains, and inheriting a host `dir="rtl"` would reverse the visual order of every line while leaving the text alone. Each line is additionally `unicode-bidi: isolate`, so a right-to-left run inside one line cannot reorder its neighbours.
• Invisible bidirectional control characters are rendered as a visible `<U+202E>` in a warning colour, everywhere the component draws text — tokenised code, diff lines and terminal output. They occupy no width and reorder the glyphs around them, so a line can display as one statement and copy as another (CVE-2021-42574, "Trojan Source"); a diff is the highest-risk place for that, because it is where code gets approved. The clipboard keeps the host's original bytes: rewriting source on the way out would corrupt a legitimate Arabic or Hebrew string literal to defend against a rare hostile one.
• Line-number gutters, diff +/- markers and the streaming caret are `aria-hidden`, so screen readers read only the source text.
• The truncation notice is a real `<button>` outside the scroll region, not decoration inside it. "There is more file" has to be reachable by keyboard, and placed after the last rendered line it would sit below a screenful of source — the one place a reader has no reason to scroll to.
• A diff states its own scale: the region is `aria-describedby` a summary reading "Diff: 3 hunks, 12 added lines, 4 removed lines." The size of a change otherwise reaches the page only as geometry — the header's `+12 −4` chips and the per-line tint — leaving a screen-reader user to walk every line to find out how big it is. It is a DESCRIPTION, not part of the name, so a host `ariaLabel` still names the region and gets the summary too, and the chips are `aria-hidden` because this says it better.
• Added and removed lines are prefixed with an `sr-only` "Added:" / "Removed:", in both `unified` and `split` modes. A red or green tint is not information, and in split mode the two columns read as one continuous run of text without it.
• Highlighting renders a token model through Angular bindings — no `innerHTML` and no `bypassSecurityTrust*`, so untrusted source is never executed as markup.