# CodeBlock

Code avec couleurs et le bouton Copier, dans sa propre barre qui nomme la langue.

## 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="Copié">Copier</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>
```

## Quand l'utiliser

-   Pour chaque extrait de code que la personne lira ou copiera : un exemple, une commande, une configuration.

## Quand ne pas l'utiliser

-   **Pour un nom au sein d'une phrase** (`data-size`) : code en ligne, sans bloc.

## Exemples

### HTML

Les couleurs proviennent des rôles de Feitio : la balise en texte orange, l'attribut en moussé, la valeur en encre. Copie affiche "Copié" sur le bouton lui-même et copie du texte brut.

Afficher le code

```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>
```

### Avec le gestionnaire de paquets

Pour les commandes d'installation, la barre propose npm, pnpm, yarn et bun ; le choix s'applique sur tout le site et est mémorisé.

Afficher le code

```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.  **Bar:** le langage, ou le choix du gestionnaire de paquets.
2.  **Copier:** petit, à la fin de la barre ; indique « Copié » à sa place.
3.  **Le code**, dans les couleurs du rôle.

## Accessibilité

-   Le bloc défile latéralement tout seul ; la page ne le fait jamais.
-   « Copié » apparaît sur le bouton, là où se trouve l'œil et le focus.

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-code"`

obligatoire

Le bloc.

`data-lang`

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

Quelles couleurs ; HTML et JSX obtiennent des couleurs de balles.

`class="copy"`

le bouton

Copie du texte brut.

`data-pm`

sur chaque `<pre>`

Une commande par gestionnaire de paquets.