# CodeBlock

Código com cores e o botão Copiar, numa barra própria que diz a linguagem.

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

## Quando usar

-   Para todo trecho de código que a pessoa vai ler ou copiar: um exemplo, um comando, uma configuração.

## Quando não usar

-   **Para um nome dentro de uma frase** (`data-size`): o código em linha, sem bloco.

## Exemplos

### HTML

As cores saem dos papéis do Feitio: a tag no laranja de texto, o atributo em musgo, o valor na tinta. O Copiar diz "Copiado" no próprio botão e copia o texto puro.

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

### Com o gerenciador de pacotes

Para comandos de instalação, a barra traz npm, pnpm, yarn e bun; a escolha vale para todo o site e fica guardada.

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

## Anatomia

1.  **Barra:** a linguagem, ou a escolha do gerenciador.
2.  **Copiar:** pequeno, na ponta da barra; diz "Copiado" no lugar.
3.  **O código**, com as cores dos papéis.

## Acessibilidade

-   O bloco rola sozinho para o lado; a página nunca.
-   O "Copiado" aparece no botão, onde o olho e o foco estão.

## Atributos

Atributo

Valores

Para quê

`class="feitio-code"`

obrigatório

O bloco.

`data-lang`

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

Quais cores; HTML e JSX ganham cores de tag.

`class="copy"`

o botão

Copia o texto puro.

`data-pm`

em cada `<pre>`

Um comando por gerenciador.