Component

Code block

Displays source code with Shiki syntax highlighting themed to the palette. It shows a filename header, a one-tap copy button, optional line numbers and highlights, and can wrap or scroll long content.

Basic

classes.ts

import { cn } from '@herbst/ui';

export const classes = cn('px-4 py-2', active && 'bg-primary');

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbCodeBlockImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-code-block-basic',
  imports: [HbCodeBlockImports],
  template: `
    <hb-code-block
      class="w-full max-w-2xl"
      hbLanguage="typescript"
      hbFilename="classes.ts"
      [hbCode]="code"
    />
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoCodeBlockBasicComponent {
  protected readonly code =
    "import { cn } from '@herbst/ui';\n" +
    '\n' +
    "export const classes = cn('px-4 py-2', active && 'bg-primary');";
}

Line numbers & highlights

leaf.ts

export function fallingLeaves(tree: string): Record<string, string> {
  return {
    tree,
    season: 'Autumn',
    city: 'Freiburg',
  };
}

Languages

terminal

npx herbst-ui@latest add button card

theme.css

:root {
  --primary: oklch(0.545 0.155 42);
  --background: oklch(0.973 0.005 95);
}

No header, wrap & max height

{
  "title": "Autumn in the Black Forest",
  "city": "Freiburg",
  "tree": "Oak",
  "taken": "2026-11-03",
  "notes": "Leaves turning amber and rust; a cool wind off the hills; mist settling over the valley below."
}

No header · hover to copy · wraps · scrolls past 140px

API reference

hb-code-block

Property	Description	Type	Default
[hbCode]	Source code to render and copy.	string	''
[hbLanguage]	Language for highlighting (ts, angular-ts, html, css, json, bash, …).	HbCodeLanguage	'ts'
[hbFilename]	Name shown in the header (falls back to the language).	string	''
[hbShowHeader]	Show the header bar; when off, copy floats on hover.	boolean	true
[hbCopyButton]	Show the copy button.	boolean	true
[hbLineNumbers]	Show a gutter with line numbers.	boolean	false
[hbHighlightLines]	Line numbers (1-based) to emphasise.	number[]	[]
[hbWrap]	Wrap long lines instead of scrolling horizontally.	boolean	false
[hbMaxHeight]	Max height in pixels before the block scrolls (0 = unlimited).	number	0
(hbCopy)	Emitted when the code is copied.	void	—