Ir para o conteúdo

Código em imagem SVG

Converta um excerto de código numa imagem com destaque de sintaxe, moldura de janela e fundo gradiente.

Entrada
14
48
Saída

Código em imagem SVG

Cole um excerto de código, escolha a sua linguagem de programação e esta ferramenta renderiza-o como uma imagem com destaque de sintaxe dentro de uma janela arredondada — exatamente o tipo de captura de ecrã de código que quer partilhar num blogue, num tweet, numa apresentação ou em documentação interna. Palavras-chave, strings, comentários e números são coloridos automaticamente, e a janela recebe uma barra de título opcional ao estilo macOS com pontos coloridos, para que o resultado pareça um editor real e não um simples despejo de texto.

A ferramenta suporta nove linguagens — JavaScript, TypeScript, Python, JSON, HTML, CSS, Bash, SQL e texto simples — cada uma com as suas próprias regras de destaque para palavras-chave, strings e comentários. Escolha um tema de fundo entre seis opções de gradiente (pôr do sol, oceano, meia-noite, floresta, uva ou monocromático) e a ferramenta envolve a janela num cartão gradiente compatível. Ajuste o espaçamento ao redor da janela, ative a sombra projetada, defina o título da janela e altere de forma independente os números de linha ou a barra de título. O tamanho da letra dimensiona toda a imagem, portanto uma linha curta e uma função de cinquenta linhas ficam igualmente legíveis.

O resultado é um documento SVG autossuficiente e independente da resolução — nítido em qualquer tamanho, fácil de integrar diretamente numa página ou ferramenta de design, e suficientemente pequeno para copiar como texto. A contagem de linhas, contagem de caracteres e tamanho final da imagem em pixels atualizam-se em tempo real sob a saída conforme escreve ou altera as opções, para que veja exatamente o que está prestes a copiar ou transferir.

Tudo acontece no seu navegador usando um pequeno destaque incorporado — nenhum código é enviado, e nenhum serviço de destaque externo vê o que cola. Isto o torna seguro para usar em funcionalidades não publicadas, ferramentas internas ou qualquer outra coisa que prefira não enviar para um servidor externo apenas para fazer uma captura de ecrã bonita.

FAQ

Que linguagens de programação têm destaque de sintaxe?
JavaScript, TypeScript, Python, JSON, HTML, CSS, Bash e SQL têm destaque de palavras-chave, strings, comentários e números. Escolha "Texto simples" para o resto — renderiza sem codificação de cores.
Posso alterar o fundo e a aparência da janela?
Sim. Escolha um de seis temas de gradiente, ajuste o espaçamento ao redor da janela, ative a sombra projetada e altere de forma independente a barra de título com pontos coloridos e os números de linha.
Que formato tem a imagem e posso obter PNG?
O resultado é um SVG vetorial — nítido em qualquer tamanho e fácil de incorporar diretamente numa página. Para obter PNG, abra o ficheiro .svg transferido no seu navegador ou num editor de imagens e exporte-o como PNG; esta ferramenta não o rasteriza automaticamente.
Há um limite de quanto código posso colar?
Sem limite de linha fixo, mas a imagem gerada é limitada a 10 MB. Excertos extremamente longos que excedam esse limite produzem uma mensagem pedindo que encurte a entrada.
O meu código é enviado para algum lugar?
Não. O destaque e a renderização de imagens acontecem completamente no seu navegador usando um pequeno tokenizador incorporado — o seu código nunca sai do seu dispositivo.