18/Contenido

Bloque de código

Código con cabecera, botón de copiar y colores de sintaxis que siguen el tema.

Con cabecera

resources/css/app.css

@import "tailwindcss";
@import "cobalto/tailwind";

HTML

<div class="cb-code">
  <div class="cb-code__head"><span>resources/css/app.css</span><button class="cb-code__copy" type="button" data-cb-copy><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg><span data-cb-copy-label>Copiar</span></button></div>
  <pre class="cb-code__pre"><code><span class="cb-tok-key">@import</span> <span class="cb-tok-str">"tailwindcss"</span>;
<span class="cb-tok-key">@import</span> <span class="cb-tok-str">"cobalto/tailwind"</span>;</code></pre>
</div>

Copiar un texto

Con un valor, data-cb-copy copia ese texto o el elemento con ese id.

npm install cobalto

HTML

<code class="cb-code--inline">npm install cobalto</code>
<button class="cb-btn cb-btn--outline cb-btn--sm" type="button" data-cb-copy="npm install cobalto"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg><span data-cb-copy-label>Copiar comando</span></button>

Clases y modificadores

Clase	Descripción
`.cb-code`	Contenedor del bloque.
`.cb-code__head`	Cabecera con nombre de archivo y botón.
`.cb-code__copy`	Botón de copiar. `.is-copied` lo pinta de verde. `--floating` lo pone encima del código.
`.cb-code__pre`	Área con scroll horizontal.
`.cb-code--inline`	Código en línea.
`.cb-tok-tag\|attr\|str\|com\|key`	Colores de sintaxis basados en tokens.

Atributos data-cb-*

Atributo	Descripción
`data-cb-copy`	Sin valor copia el `pre` del bloque; con id o selector copia ese elemento; con otro texto, el texto.
`data-cb-copy-label`	Elemento cuyo texto cambia a "Copiado".
`data-cb-copy-done`	Texto alternativo para el estado copiado.
`data-cb-copy-error`	Texto si no se pudo copiar. Por defecto: "Error al copiar".

JavaScript

Evento	Cuándo se dispara
`cb:copy`	En el botón después de copiar (`detail.text`).

Accesibilidad

El botón cambia su texto a "Copiado", que los lectores de pantalla anuncian al tener foco.
Sin HTTPS usa un método alternativo para copiar.