Code-Block — UI-Kit-Galerie

Beispiele

PHP mit Highlighting + Zeilennummern

beispiel.phpphp

// Tür 1: Framework als Bibliothek
$rows = kunden_rest_list(['limit' => 25]);
echo invisible_render_id('component.table', [
    'columns' => $spalten,
    'rows'    => $rows,
]);

JSON

manifest.jsonjson

{
  "id": "ui.button",
  "version": "1.0.0",
  "targets": ["web.document"],
  "copyable": true,
  "order": 12
}

Ohne Sprache (nur escaped)

Foundations
└── Layouts
    └── UI Elements

Script-Injection bleibt Text

js

const evil = '<script>alert(1)</script>';

Eigenschaften

Prop	Typ	Default	Builder-Label
code *	string	—	Quelltext
filename	string	""	Dateiname (Kopfzeile)
language	string	""	Sprache (Label)
lineNumbers	boolean	false	Zeilennummern
copyable	boolean	true	Kopieren-Knopf

* Pflicht-Prop

Events & Slots

Events: ⚡ copy — im Surface per on: {<event>: {action, params}} verdrahtbar.

Stellschrauben (Komponenten-Tokens)

Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.

Token	Default
`--code-block-code-border`	`var(--color-code-border)`
`--code-block-code-comment`	`var(--color-code-comment)`
`--code-block-code-keyword`	`var(--color-code-keyword)`
`--code-block-code-line-number`	`var(--color-code-line-number)`
`--code-block-code-muted`	`var(--color-code-muted)`
`--code-block-code-number`	`var(--color-code-number)`
`--code-block-code-property`	`var(--color-code-property)`
`--code-block-code-string`	`var(--color-code-string)`
`--code-block-code-surface`	`var(--color-code-surface)`
`--code-block-code-surface-raised`	`var(--color-code-surface-raised)`
`--code-block-code-text`	`var(--color-code-text)`
`--code-block-code-variable`	`var(--color-code-variable)`
`--code-block-elevation-overlay`	`var(--elevation-overlay)`
`--code-block-radius-full`	`var(--radius-full)`
`--code-block-radius-sm`	`var(--radius-sm)`
`--code-block-radius-surface`	`var(--radius-surface)`

Genutzte Design-Tokens

border.hairlinecolor.code.bordercolor.code.commentcolor.code.keywordcolor.code.line-numbercolor.code.mutedcolor.code.numbercolor.code.propertycolor.code.stringcolor.code.surfacecolor.code.surface-raisedcolor.code.textcolor.code.variableelevation.overlayfont.family.defaultfont.family.monoleading.baseradius.fullradius.smradius.surfacesize.1size.2size.3size.4size.8text.smtext.xs