Code-Block — component.code-block

Componentv2.0.0Inhaltweb.documentweb.applicationdesktop.shellbuilder.preview

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

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

Eigenschaften

Prop	Typ	Default
`code *`	string	`—`
`filename`	string	`""`
`language`	string	`""`
`lineNumbers`	boolean	`false`
`copyable`	boolean	`true`

Events & Slots

Events: copy

Stellschrauben (Komponenten-Tokens)

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.hairline color.code.border color.code.comment color.code.keyword color.code.line-number color.code.muted color.code.number color.code.property color.code.string color.code.surface color.code.surface-raised color.code.text color.code.variable elevation.overlay font.family.default font.family.mono leading.base radius.full radius.sm radius.surface size.1 size.2 size.3 size.4 size.8 text.sm text.xs