components
code-snippet
Bloco de código com syntax highlighting básico e botão de copy automático. Otimizado pra trechos curtos a médios.
overview
// exemplo
const ds = "casa hacker";
function hack() { return ds; }
variantes
Multi-linha (default)
const x = 42;
Inline
Usa o var(--ch-code) pra destaque verde.
comportamentos
- Botão 'copy' aparece automaticamente (injetado pelo shell.js)
- Click copia o texto puro (sem tags HTML)
- Feedback visual 'copied!' por 1.5s
- Funciona via Clipboard API (HTTPS ou localhost)
modifiers · api
| prop | tipo | default | descrição |
|---|---|---|---|
| .code-snippet | class | — | bloco multi-linha |
| .code-inline | class | — | código inline em texto corrido |
| span.k | class | — | keyword (verde) |
| span.s | class | — | string (pink) |
| span.c | class | — | comment (italic, java) |
| span.v | class | — | value (blue) |
| span.n | class | — | number (script orange) |
quando usar
use
não use
acessibilidade
- Botão copy tem aria-label
- Foco visível no botão
- Texto copiado tem feedback visível E anunciável
- Conteúdo pre-formatado preservado com white-space: pre
código
<div class="code-snippet">
<span class="c">// comentário</span>
<span class="k">const</span> x = <span class="s">"hello"</span>;
</div>
<!-- inline -->
<p>Usa <code class="code-inline">var(--ch-code)</code>.</p>