PT-BR

Realce de sintaxe

Com este realce de sintaxe você colore código-fonte sem instalar nada: cole o código, escolha a linguagem e um esquema claro ou escuro e copie o HTML pronto. As cores ficam dentro do próprio código, então ele aparece certo em blogs, e-mails e documentos sem uma folha de estilos extra.

Fonte: WCAG 2.2 – Success Criterion 1.4.3 Contrast (Minimum): 4,5:1 para texto (cores dos dois temas verificadas). Atualizado em: .

Cole o código-fonte. O realce na visualização é atualizado a cada alteração.

Seu texto fica no seu navegador: não é enviado, não é salvo e não aparece no endereço da página.

Visualização

// Mostrar uma saudação
function greet(name) {
  const text = "Olá, " + name + "!";
  console.log(text);
  return text.length;
}

greet("mundo");
Minha caixa de ferramentas

Resultado

HTML colorido
<pre style="background:#ffffff;color:#1f2328;padding:12px 14px;border-radius:6px;overflow:auto;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;tab-size:4;margin:0"><code style="font:inherit"><span style="color:#57606a;font-style:italic">// Mostrar uma saudação</span> <span style="color:#cf222e">function</span> <span style="color:#8250df">greet</span>(name) { <span style="color:#cf222e">const</span> text = <span style="color:#0a3069">"Olá, "</span> + name + <span style="color:#0a3069">"!"</span>; console.<span style="color:#8250df">log</span>(text); <span style="color:#cf222e">return</span> text.length; } <span style="color:#8250df">greet</span>(<span style="color:#0a3069">"mundo"</span>);</code></pre>
Detectado
JavaScript / TypeScript, 8 linhas, 145 caracteres
O HTML leva as cores como atributos style e pode ser colado onde HTML for aceito. A detecção é uma aproximação baseada em padrões, não um analisador completo; com sintaxe incomum, um trecho pode ficar sem cor. O código é processado só no seu navegador, não é salvo nem enviado.

Como o cálculo é feito

O realce de sintaxe colore os elementos do código-fonte: palavras-chave, textos, números, comentários e nomes de funções recebem cada um sua cor. Isso deixa o código mais legível, principalmente em textos, documentações e e-mails, onde não há um editor com esquema de cores.

O que o realçador faz

Seguro e sem perdas

O código-fonte não é alterado: apenas dividido em trechos e envolvido por indicações de cor. Caracteres como < e & são escapados para que código com fragmentos de HTML não afete o resto da página. Para arrumar o código antes, use o formatador de JSON, o formatador de SQL ou o formatador de HTML.

Perguntas frequentes

Como coloro código para um post de blog?

Cole o código, escolha linguagem e esquema de cores e copie o HTML do campo de resultado. Insira no editor do blog como bloco HTML. As cores estão no código, então não é preciso uma folha de estilos extra.

Posso colar o código colorido no Word ou em um e-mail?

Sim, em geral pela visualização: selecione, copie e cole, e as cores são mantidas. Em programas que não aceitam HTML, uma captura de tela da visualização resolve.

Quais linguagens são aceitas?

JavaScript e TypeScript, JSON, HTML com script e estilo embutidos, CSS, SQL, Python e Bash. Para qualquer outra, escolha “Texto simples”; assim só resta a formatação do bloco.

Meu código é salvo ou enviado?

Não. O processamento acontece no seu navegador. O código não aparece no endereço e não é salvo.

Por que alguns trechos não são coloridos?

O realçador reconhece padrões como palavras-chave, textos e comentários, mas não é um analisador completo. Sintaxe incomum ou variantes da linguagem às vezes ficam em preto.

Fontes e base legal

Última atualização: · Princípios editoriais

Ferramentas relacionadas