SWCore / Componentes / Realce de código

Realce de código Componentes

Deixa blocos de código coloridos e legíveis — palavras-chave, textos, comentários e tags em cores diferentes — com o nome da linguagem, botão "Copiar" e numeração de linhas opcional. Muda de cor sozinho no tema claro e escuro.

O que é

Serve para tutoriais, documentação, blog de programação, página "como instalar": qualquer lugar onde você mostra código para alguém copiar. Você escreve o código dentro de <pre sw-code="js"><code>…</code></pre> dizendo a linguagem, e ele colore. Em cima do bloco aparece uma faixa com o nome da linguagem e o botão Copiar. É o mesmo realce usado em todos os códigos desta documentação.

Precisa do JavaScript do SWCore (é um realçador próprio e leve — não usa Prism nem Highlight.js). Ele lê o texto do bloco, colore e troca o <pre> por um bloco pronto. São dois esquemas de cores: um escuro para o tema noite e um claro para o tema dia, que trocam sozinhos com o tema da página. Linguagens: JavaScript/TypeScript, CSS/SCSS/Less, HTML (e XML/SVG), JSON, PHP e Bash.

Quando usar

Tutorial ou post de blog com trechos de código: sw-code com a linguagem.
Instrução de instalação que a pessoa vai copiar: o botão Copiar já vem pronto.
Código longo que você vai comentar linha a linha ("na linha 4…"): acrescente swcode-lines.

Comece aqui

Coloque o SWCore na página.

<link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">

<!-- fim do body -->
<script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

Escreva o código dentro de <pre sw-code="linguagem"><code>.

const total = preco * quantidade;
console.log('Total: R$ ' + total);

<pre sw-code="js"><code>const total = preco * quantidade;
console.log('Total: R$ ' + total);</code></pre>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

1. Linguagens

O valor de sw-code é a linguagem. Nomes aceitos: js / javascript / ts / typescript, css / scss / less, html, json, php, bash / sh / shell. Qualquer outro nome (ou nenhum) é colorido como HTML.

// calcula o frete
async function frete(cep) {
  const r = await fetch('/frete?cep=' + cep);
  return r.ok ? r.json() : null;
}

sw-code="js"

<pre sw-code="js"><code>// calcula o frete
async function frete(cep) {
  const r = await fetch('/frete?cep=' + cep);
  return r.ok ? r.json() : null;
}</code></pre>

/* botão da loja */
.comprar {
  --cor: #16a34a;
  padding: 1.2rem 2.4rem;
  border-radius: 4px;
}

sw-code="css"

<pre sw-code="css"><code>/* botão da loja */
.comprar {
  --cor: #16a34a;
  padding: 1.2rem 2.4rem;
  border-radius: 4px;
}</code></pre>

<!-- botão principal -->
<a href="/contato" sw-btn="pri pill">Quero meu site</a>

sw-code="html" — os sinais < e > escritos como < e >

<pre sw-code="html"><code>&lt;!-- botão principal --&gt;
&lt;a href="/contato" sw-btn="pri pill"&gt;Quero meu site&lt;/a&gt;</code></pre>

{
  "produto": "Café especial",
  "preco": 39.9,
  "disponivel": true
}

sw-code="json"

<pre sw-code="json"><code>{
  "produto": "Café especial",
  "preco": 39.9,
  "disponivel": true
}</code></pre>

<?php
// saudação
$nome = 'Ana';
echo "Olá, " . htmlspecialchars($nome);

sw-code="php"

<pre sw-code="php"><code>&lt;?php
// saudação
$nome = 'Ana';
echo "Olá, " . htmlspecialchars($nome);</code></pre>

# baixar e publicar
git pull origin main
echo "Publicado em $DATA"

sw-code="bash"

<pre sw-code="bash"><code># baixar e publicar
git pull origin main
echo "Publicado em $DATA"</code></pre>

2. Numeração de linhas

Acrescente swcode-lines (ou sw-code-lines) no <pre>. Os números não vão junto quando a pessoa copia.

const itens = document.querySelectorAll('.item');
itens.forEach((item) => {
  item.addEventListener('click', () => {
    item.classList.toggle('ativo');
  });
});

sw-code="js" swcode-lines

<pre sw-code="js" swcode-lines><code>const itens = document.querySelectorAll('.item');
itens.forEach((item) => {
  item.addEventListener('click', () => {
    item.classList.toggle('ativo');
  });
});</code></pre>

3. Outras formas de dizer a linguagem

Se o seu conteúdo vem de um editor de blog ou de Markdown, ele costuma escrever <code class="language-js"> — isso também é reconhecido, sem precisar de sw-code. E para mostrar HTML sem escapar os sinais, coloque o código dentro de um <script type="text/plain"> no <pre>: o navegador não interpreta o que está ali.

.titulo { font-size: 3.2rem; }

<code class="language-css"> — detectado sozinho <pre><code class="language-css">.titulo { font-size: 3.2rem; }</code></pre>

<pre sw-code="html"><script type="text/plain">
<form action="/contato" method="post">
  <input sw-inp name="email" type="email" placeholder="seu@email.com">
  <button sw-btn="pri">Enviar</button>
</form>
</script></pre>

Tabela de opções

Palavra	O que faz	Exemplo
No <pre>
`sw-code`	Liga o realce e diz a linguagem. Grafias aceitas: `sw-code`, `swcode`, `data-sw-code`, `data-swcode`.	`<pre sw-code="js">`
`swcode-lines`	Numera as linhas. Também: `sw-code-lines`, `data-swcode-lines`.	`<pre sw-code="css" swcode-lines>`
Linguagens (valor de sw-code)
`js · javascript · ts · typescript`	Palavras-chave, textos, números, funções, comentários.	`sw-code="js"`
`css · scss · less`	Seletores, propriedades, valores, variáveis `--x`, `@regras`.	`sw-code="css"`
`html (e qualquer outro nome)`	Tags, atributos, valores e comentários. Também serve para XML e SVG.	`sw-code="html"`
`json`	Textos, números, true/false/null.	`sw-code="json"`
`php`	Palavras-chave, variáveis `$x`, funções, textos, comentários.	`sw-code="php"`
`bash · sh · shell`	Comandos, variáveis, textos, comentários `#`.	`sw-code="bash"`
Outras formas de indicar
`<code class="language-…">`	Detectado sozinho (também `lang-…`).	`<pre><code class="language-js">`
`<script type="text/plain">`	Dentro do `<pre>`: o código vai sem escapar. Para mostrar um `</script>` literal, escreva `<\/script>`.	`<pre sw-code="html"><script type="text/plain">…</script></pre>`

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

Passo a passo de instalação num tutorial Ao vivo

1. Coloque o CSS no <head>:

<link rel="stylesheet" href="/css/loja.css">

2. Ligue o carrinho no fim da página:

Carrinho.iniciar({ moeda: 'BRL', frete: true });

<p><strong>1.</strong> Coloque o CSS no &lt;head&gt;:</p>
<pre sw-code="html"><code>&lt;link rel="stylesheet" href="/css/loja.css"&gt;</code></pre>

<p><strong>2.</strong> Ligue o carrinho no fim da página:</p>
<pre sw-code="js"><code>Carrinho.iniciar({ moeda: 'BRL', frete: true });</code></pre>

Post de blog que veio de Markdown Referência

<!-- o conversor de Markdown gera isto a partir de três crases + "php" -->
<pre><code class="language-php">$total = $preco * $qtd;</code></pre>

<!-- não precisa mexer: o SWCore reconhece o "language-php" e colore -->

API (JavaScript)

SW.Code.initAll(raiz)

Colore os blocos dentro de raiz. Normalmente não precisa: o SWCore faz sozinho, até em blocos inseridos depois. SWCode é o mesmo objeto.

Precisa de quê

swcore.min.css (cores e faixa do bloco) e swcore.min.js (o realce).
O botão Copiar usa a área de transferência do navegador: funciona em site https:// (ou localhost).

Cuidados — erros comuns

HTML sem escapar dentro de <code>: o navegador cria o elemento de verdade (aparece um botão no lugar do código). Escreva < e >, ou use o <script type="text/plain">.
PHP começando com <?php sem escapar: o navegador esconde o trecho. Escreva <?php.
Esquecer a linguagem: o bloco é colorido como HTML e a faixa mostra "code". Sempre diga sw-code="…".
Recuar o código para acompanhar o HTML da página: o recuo aparece no bloco. O espaço do começo e do fim é cortado, mas o das linhas do meio fica.

O que ele não faz

Só as linguagens da lista. Python, SQL, Java etc. saem coloridos como se fossem HTML (quase sem cor).
O realce é por padrões simples (não entende o código de verdade): casos raros, como uma expressão regular com / ou aspas, podem sair com a cor trocada. Texto com // dentro ('https://site.com') já sai certo, como texto.
Não marca linhas em destaque, não mostra diferenças (+/−) e não tem tema escolhível: são só os dois esquemas, dia e noite.
O bloco original é substituído: um id ou classe que você colocou no <pre> não vai para o bloco novo.

← AnteriorMáquina de escrever Próximo →Tema dia/noite