Theme: ← Übersicht Tokens

Code-Block

Code-Fenster im Syntax-Stil: dunkle Flaeche in jedem Theme (color.code.*-Tokens), Traffic-Dots, Dateinamen-Tab, Kopieren-Knopf, Zeilennummern, serverseitiges Syntax-Highlighting (php/js/json/bash/html/css)

Components v2.0.0 Inhalt WebsiteAppDesktop component.code-block

Nutzt: ui.icon

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

PropTypDefaultBuilder-Label
code *string—Quelltext
filenamestring""Dateiname (Kopfzeile)
languagestring""Sprache (Label)
lineNumbersbooleanfalseZeilennummern
copyablebooleantrueKopieren-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.

TokenDefault
--code-block-code-bordervar(--color-code-border)
--code-block-code-commentvar(--color-code-comment)
--code-block-code-keywordvar(--color-code-keyword)
--code-block-code-line-numbervar(--color-code-line-number)
--code-block-code-mutedvar(--color-code-muted)
--code-block-code-numbervar(--color-code-number)
--code-block-code-propertyvar(--color-code-property)
--code-block-code-stringvar(--color-code-string)
--code-block-code-surfacevar(--color-code-surface)
--code-block-code-surface-raisedvar(--color-code-surface-raised)
--code-block-code-textvar(--color-code-text)
--code-block-code-variablevar(--color-code-variable)
--code-block-elevation-overlayvar(--elevation-overlay)
--code-block-radius-fullvar(--radius-full)
--code-block-radius-smvar(--radius-sm)
--code-block-radius-surfacevar(--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