Código para imagem: transforme trechos de código em prints PNG ou SVG | We.Inc
Cole código e receba uma imagem limpa dele: cores de sintaxe, seis temas, fundos em gradiente, barra de janela, números de linha e tamanhos para redes sociais. Exporte um PNG 2x nítido ou um SVG. Grátis, no seu navegador.
Gerador de imagem de código
Uma imagem de código é uma figura de um trecho com cores de sintaxe, espaçamento e um fundo, feita para slides, posts e documentos onde não há blocos de código de verdade. Cole o código abaixo, escolha uma linguagem, um tema e um fundo, escolha um tamanho como 1200 por 675 e baixe um PNG nítido ou um SVG.
Tamanhos predefinidos
Predefinição
Pixels
Indicado para
Automático
Se ajusta ao código
Documentação, slides, arquivos README
Paisagem 16:9
1200 por 675
Prévias de link e posts largos no feed
Quadrado
1080 por 1080
Posts quadrados no feed
Retrato 4:5
1080 por 1350
Posts altos no feed
Cole ou digite o código, e a prévia se atualiza enquanto você escreve. A linguagem é detectada para você, ou escolha uma entre nove. Os arquivos PNG são exportados com o dobro do tamanho, para texto nítido em telas de alta densidade.
Cole o código no editor. A linguagem é deduzida pelo conteúdo; mude se o palpite estiver errado.
Escolha um tema, um fundo e um tamanho. Ative ou desative a barra de janela e os números de linha, e defina o espaçamento e o tamanho da fonte.
Adicione um nome de arquivo para aparecer na barra de janela, se isso ajudar quem lê.
Baixe um PNG (renderizado em 2x) ou um SVG que mantém o código como texto real e selecionável.
Mantenha os trechos curtos. De dez a vinte linhas ficam boas em um post; código mais longo vai melhor em um gist ou em um bloco de código que as pessoas possam copiar.
Use fonte de tamanho 16 ou mais em posts para redes sociais, que muitas vezes são vistos no celular.
Quando compartilhar uma imagem de código, compartilhe também o código como texto ou link. Leitores de tela não conseguem ler a figura, e ninguém consegue copiar dela.
Escolha um tema claro para slides exibidos em salas iluminadas e um escuro para telas e feeds de redes sociais.
Perguntas frequentes
Meu código é enviado para algum lugar?
Não. O destaque de sintaxe e a exportação da imagem acontecem no seu navegador. Nada é enviado a um servidor, então é seguro para código privado.
Por que o PNG tem o dobro do tamanho que escolhi?
Ele é exportado com densidade de pixels 2x para que o texto fique nítido em telas de alta resolução de celulares e notebooks. Quando exibido no tamanho escolhido, cada pixel CSS tem quatro pixels da imagem por trás.
Para que serve a exportação em SVG?
O SVG mantém o código como texto dentro de uma imagem vetorial, então ele escala para qualquer tamanho e o texto ainda pode ser selecionado em alguns visualizadores. Ele usa a fonte monoespaçada do próprio visualizador, então pode parecer um pouco diferente do PNG em outro computador.
Quão preciso é o destaque de sintaxe?
É um tokenizador leve que colore palavras-chave, strings, números, comentários, funções, tags e atributos. Isso cobre o que deixa um trecho legível em uma imagem. Não é um parser completo, então sintaxes incomuns podem aparecer como texto simples.
Criando imagens de código que as pessoas leem
Recorte a parte que importa. Tire imports e código repetitivo, a não ser que eles sejam o assunto, e use um comentário para marcar a linha que você quer que as pessoas olhem.
O contraste importa tanto em uma imagem quanto em uma página. Os temas daqui mantêm os comentários legíveis, mas mais discretos que o código, e deixam strings e palavras-chave bem distintas.
Texto alternativo para imagens de código
Ao publicar a imagem, descreva no texto alternativo o que o código faz, por exemplo: função JavaScript que aplica debounce de 300 milissegundos a um campo de busca. Cole o próprio código no corpo do post ou em uma resposta, se a plataforma permitir.
Meia-noite
Brasa
Floresta
Noite violeta
Papel
Areia
Céu
Pôr do sol
Menta
Ardósia
Pêssego
Nenhum
Automático
1200 por 675
1080 por 1080
1080 por 1350
Crie uma imagem
Código
Linguagem
Detectar ({lang})
Tamanho
Espaçamento: {n}px
Tamanho da fonte: {n}px
Nome do arquivo
Barra de janela
Números de linha
Tema
Fundo
Prévia da imagem de código {lang}
{w} por {h} px (o PNG é exportado em {w2} por {h2})