# CodeBlock

Código con colores y el botón Copiar, en su propia barra que nombra el lenguaje.

## 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="Copiado">Copiar</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>
```

## Cuándo usarlo

-   Para cada fragmento de código que la persona lea o copie: un ejemplo, un comando, una configuración.

## Cuándo no usarlo

-   **Para un nombre dentro de una oración** (`data-size`): código en línea, sin bloque.

## Ejemplos

### HTML

Los colores provienen de los roles de Feitio: la etiqueta en texto naranja, el atributo en musgo, el valor en tinta. Copiar dice "Copiado" en el botón mismo y copia texto plano.

Mostrar código

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

### Con el gestor de paquetes

Para comandos de instalación, la barra ofrece npm, pnpm, yarn y bun; la elección se aplica en todo el sitio y se recuerda.

Mostrar código

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

## Anatomía

1.  **Bar:** el idioma, o la elección del gestor de paquetes.
2.  **Copiar:** pequeño, al final de la barra; dice "Copiado" en su lugar.
3.  **El código**, en los colores del rol.

## Accesibilidad

-   El bloque se desliza lateralmente por sí mismo; la página nunca lo hace.
-   "Copiado" aparece en el botón, donde está la vista y el foco.

## Atributos

Atributo

Valores

Para qué sirve

`class="feitio-code"`

obligatorio

El bloque.

`data-lang`

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

¿Qué colores? HTML y JSX obtienen los colores de las etiquetas.

`class="copy"`

el botón

Copia texto plano.

`data-pm`

sobre cada `<pre>`

Un comando por gestor de paquetes.