Como usar: Código para Imagem
- Cole seu código — ou teste o Exemplo. A linguagem é detectada automaticamente, mas você pode escolher uma.
- Escolha um tema, um fundo e um estilo de janela, e digite um nome de arquivo para a barra de título.
- Ajuste o espaçamento e o tamanho da fonte; ative os números de linha se for citar linhas específicas.
- Baixe um PNG (2× fica nítido em telas retina e redes sociais), um SVG para documentação, ou use Copiar imagem e cole no Slack, no X ou em um slide.
Por que compartilhar código como imagem?
Em redes sociais e slides, código em texto perde a formatação e as cores. Uma imagem de código mantém a indentação, o destaque de sintaxe e o layout exatamente como você quis, fica bonita no feed e não é estragada por um editor de texto. Para documentação, onde as pessoas vão copiar o código, continue usando blocos de código em texto e use a imagem apenas como ilustração.
Como ela é desenhada
O trecho é colorido por um pequeno tokenizador embutido — comentários, strings, números, palavras-chave, funções e propriedades para dez linguagens comuns — e pintado em um canvas com a fonte monoespaçada do seu sistema. A exportação em PNG redesenha em 1×, 2× ou 3× para ficar nítida; a exportação em SVG mantém o texto como texto, então escala para qualquer tamanho e continua pesquisável. Tudo acontece no seu navegador.
Veja também: Formatador de JavaScript, Formatador de HTML, Gerador de Gradiente CSS.
Também pesquisado como: screenshot de código, imagem de código, gerador de imagem de código, código em imagem, código para png, imagem com syntax highlight, compartilhar código como imagem.
Ferramentas que combinam com: Código para Imagem
- Formatador de CSS — Transforme uma folha de estilo minificada em CSS legível, com uma propriedade por linha e blocos @media aninhados corretamente.
- Formatação JSON — Cole o JSON aqui para formatá-lo, compactá-lo ou validá-lo.
- Editor Markdown Online — Escreva em Markdown com preview ao vivo lado a lado, barra de formatação e atalhos de teclado.
- Gerador de imagens OG — Crie uma imagem de pré-visualização de link bem feita para o Facebook, LinkedIn, X, Slack e WhatsApp em segundos — escolha um modelo, digite o título, adicione um logotipo e, em seguida, baixe o arquivo PNG e as metatags correspondentes.