Componente

Code block

Exibe código-fonte com realce de sintaxe do Shiki no tema da paleta. Mostra um cabeçalho com nome de arquivo, botão de copiar com um toque, numeração e realce de linhas opcionais, e pode quebrar ou rolar conteúdo longo.

Básico

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');";
}

Numeração e realce de linhas

leaf.ts

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

Linguagens

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);
}

Sem cabeçalho, wrap e altura máxima

{
  "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

Referência de API

hb-code-block

Propriedade	Descrição	Tipo	Padrão
[hbCode]	Código-fonte a renderizar e copiar.	string	''
[hbLanguage]	Linguagem para o realce (ts, angular-ts, html, css, json, bash, …).	HbCodeLanguage	'ts'
[hbFilename]	Nome exibido no cabeçalho (usa a linguagem se vazio).	string	''
[hbShowHeader]	Mostra a barra de cabeçalho; se desligada, o copiar flutua no hover.	boolean	true
[hbCopyButton]	Mostra o botão de copiar.	boolean	true
[hbLineNumbers]	Mostra uma coluna com números de linha.	boolean	false
[hbHighlightLines]	Números de linha (base 1) a destacar.	number[]	[]
[hbWrap]	Quebra linhas longas em vez de rolar na horizontal.	boolean	false
[hbMaxHeight]	Altura máxima em pixels antes de rolar (0 = sem limite).	number	0
(hbCopy)	Emitido quando o código é copiado.	void	—