# CodeBlock

Code mit Farben und der Kopier-Button in seiner eigenen Leiste, die die Sprache benennt.

## Playground

```html
<div class="feitio-code" data-lang="html"><div class="bar"><span>HTML</span><button type="button" class="feitio-button copy" data-size="small" data-done-label="Kopiert">Kopieren</button></div><pre tabindex="0"><code>&lt;button type=&quot;button&quot; class=&quot;feitio-button&quot; data-variant=&quot;primary&quot;&gt;
  Salvar alterações
&lt;/button&gt;</code></pre></div>
```

## Wann verwenden

-   Für jeden Code-Schnipsel, den die Person lesen oder kopieren wird: ein Beispiel, ein Befehl, eine Konfiguration.

## Wann nicht verwenden

-   **Für einen Namen innerhalb eines Satzes** (`data-size`): Inline-Code, ohne Block.

## Beispiele

### HTML

Farben stammen aus Feitios Rollen: das Tag im Text orange, das Attribut in Moos, der Wert in Tinte. Kopie sagt "Kopiert" auf dem Button selbst und kopiert einfachen Text.

Code anzeigen

```html
<div class="feitio-code" data-lang="html">
  <div class="bar"><span>HTML</span><button type="button" class="feitio-button copy" data-size="small">Copiar</button></div>
  <pre><code>…</code></pre>
</div>
```

### Mit dem Paketmanager

Für Install-Befehle bietet die Leiste npm, pnpm, yarn und bun an; die Wahl gilt site-wide und wird erinnert.

Code anzeigen

```html
<div class="feitio-code" data-lang="shell">
  <div class="bar"><span class="feitio-segmented" role="group" aria-label="Gerenciador de pacotes">…</span>…</div>
  <pre data-pm="npm"><code>npm install @made-by-maid/feitio</code></pre>
  <pre data-pm="pnpm" hidden>…</pre>
</div>
```

## Anatomie

1.  **Balken:** die Sprache oder der Paketmanager-Wahl.
2.  **Kopieren:** klein, am Ende des Balkens; sagt "Kopiert" anstelle.
3.  **Der Code**, in den Rollenfarben.

## Barrierefreiheit

-   Der Block scrollt seitwärts von selbst; die Seite tut das nie.
-   "Kopiert" erscheint auf der Schaltfläche, wo Auge und Fokus sind.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-code"`

erforderlich

Der Block.

`data-lang`

`"html"`, `"jsx"`, `"css"`, `"shell"`

Welche Farben; HTML und JSX erhalten Tag-Farben.

`class="copy"`

die Schaltfläche

Kopiert einfachen Text.

`data-pm`

auf jedem `<pre>`

Eins Befehl pro Paketmanager.