Conversor de código para imagem

Transforme seu código em imagens impressionantes para compartilhar, com destaque de sintaxe.

40px
14px

Por que usar código → imagem ?

As imagens de código são perfeitas para compartilhar em redes sociais (Twitter/X, LinkedIn), em documentação, apresentações e tutoriais onde um bloco de código formatado não está disponível. Elas preservam o destaque de sintaxe e ficam ótimas em todas as plataformas.

Como funciona

  1. Cole código : insira qualquer trecho, JavaScript, Python, CSS, SQL, comandos de shell ou qualquer outra linguagem.
  2. Escolha um tema : selecione um tema claro, escuro ou de alto contraste para o destaque.
  3. Personalize o quadro : defina o estilo de janela (macOS/Windows/minimal), a cor ou gradiente de plano de fundo, o preenchimento interno e o tamanho da fonte.
  4. Exporte : baixe em PNG ou SVG, perfeito para compartilhar no Twitter/X, LinkedIn ou incorporar nos seus artigos.

Por que converter código em imagem ?

Compartilhar código como captura de tela é muito mais envolvente do que colar texto bruto, preserva o destaque de sintaxe e permanece mais legível à primeira vista nas redes sociais. As imagens de código são massivamente usadas por desenvolvedores, formadores técnicos e criadores de conteúdo no Twitter/X, LinkedIn, Instagram e em miniaturas do YouTube. Ferramentas como o Carbon (carbon.now.sh) popularizaram esse formato. Esta versão do lado do navegador gera belas capturas sem enviar seu código a um servidor externo, suporta todas as linguagens populares com destaque preciso e um estilo de janela personalizável.

Opções de personalização

O que é uma ferramenta de código para imagem?

Uma ferramenta de código para imagem pega um snippet de código fonte, aplica realce de sintaxe, envolve-o em uma moldura de janela estilizada e exporta um PNG (ou JPG, WebP) pronto para compartilhar em redes sociais, colar em um slide deck ou incorporar como imagem hero de um post de blog. O resultado se le como uma captura de tela tirada de um belo editor de código, exceto que o layout, tema e moldura são reproduzíveis e a resolução é perfeita ao pixel para qualquer proporção de aspecto que voce precise.

Realce de sintaxe é o estilo visual onde palavras-chave (if, function, return) recebem uma cor, strings outra, comentários são atenuados, e assim por diante. Bem feito, torna o código escaneável em milissegundos. Feito em texto puro, o mesmo snippet se le como uma parede de monoespaço cinza. O classico tema Monokai escuro, GitHub Dark e Dracula são os mais compartilhados em redes sociais porque seu contraste sobrevive à compressão de imagem.

Esta ferramenta roda inteiramente em seu navegador usando highlight.js para detecção de linguagem e html2canvas para rasterizar o DOM estilizado em uma imagem para download. Seu código nunca sai da página. O PNG de saída pode ser arrastado para qualquer tweet, post do LinkedIn, doc do Notion ou canvas de design, e permanece nítido porque html2canvas renderiza na proporção de pixels do dispositivo.

O que há dentro da ferramenta

A coluna esquerda é o painel de controles: uma textarea para seu código, um dropdown de linguagem com 16 opções populares (JavaScript, TypeScript, Python, HTML, CSS, JSON, Bash, SQL, Java, C#, PHP, Ruby, Go, Rust, XML, YAML), um seletor de tema (Dark Monokai, Light, GitHub Dark), um seletor de fundo com cinco gradientes e tres sólidos, mais sliders de padding e tamanho de fonte.

Duas caixas alternam os pontos de janela estilo macOS (os semáforos vermelho, amarelo, verde no topo da moldura) e números de linha. Os pontos são decoração pura mas fazem a imagem se ler como uma captura de tela de editor de código em vez de um colar de texto puro. Números de linha ajudam quando voce referencia uma linha específica em um tutorial ou relatório de bug.

A coluna direita é a pré-visualização ao vivo: ela renderiza o código realçado dentro da moldura, padding e fundo escolhidos. Cada controle atualiza a pré-visualização em tempo real. O botão Baixar PNG serializa a pré-visualização via html2canvas em resolução nativa e dispara um download do navegador. Sem ida e volta ao servidor, sem upload do seu código.

História e contexto

Impressões de listagem (a partir de 1944)

O Harvard Mark I em 1944 imprimia listagens de programa em papel de alimentação contínua, os primeiros artefatos de código fonte a deixar a memória de um computador. Pelos anos 1950 e 1960, impressoras de linha produziam milhas de FORTRAN e COBOL em papel listrado verde. O formato era monoespaçado porque a roda de margarida da impressora tinha apenas uma fonte, mas a convenção pegou: código fonte é monoespaçado porque cada editor desde entao preservou essa herança de 80 colunas.

Realce de sintaxe ao vivo no Emacs (1984)

O Emacs de Richard Stallman adicionou font-lock-mode em 1984, o primeiro realçador de sintaxe ao vivo amplamente usado. Palavras-chave apareciam em uma cor, strings em outra, comentários atenuados. A codificação visual acelerou a leitura tratando código como texto estruturado. Vim adicionou sintaxe em 1991, BBEdit no Mac em 1992, e cada editor moderno (VSCode, Sublime Text, JetBrains, Neovim) constrói sobre essa linhagem.

Temas TextMate e Monokai (2006)

O TextMate de Allan Odgaard (2004) introduziu arquivos de tema que designers podiam compartilhar. O tema Monokai de Wimer Hazenberg (2006) se tornou a icônica estética escura de código do final dos anos 2000. Sublime Text adotou Monokai como padrão em 2008, e as cores (palavras-chave verdes, strings rosas, funções azuis em fundo verde-oliva escuro) se tornaram taquigrafia visual para trabalho sério com código.

highlight.js é lançado (2006)

Ivan Sagalaev lançou highlight.js em 2006, um realçador de sintaxe em puro JavaScript que detecta linguagem automaticamente e produz HTML semantico. Tornou-se o padrão para blogs, sites de documentação e Stack Overflow. Hoje suporta 190+ linguagens e 250+ temas. Esta ferramenta usa highlight.js para a coloração de sintaxe subjacente.

Carbon é lançado (2017)

Dawn Labs (Mike Fix e Brian Dennis) lançou carbon.now.sh em 2017, a primeira ferramenta de navegador dedicada a fazer belas capturas de tela de código para redes sociais. Adicionou fundos em gradiente, cromo de janela macOS, padding configurável e exportação PNG em um clique. Carbon viralizou no Twitter e efetivamente inventou a categoria. Esta ferramenta oferece o mesmo conjunto de recursos centrais inteiramente em seu navegador, sem necessidade de conta Carbon.

Ray.so, CodeSnap, Polacode (de 2020 em diante)

Raycast lançou Ray.so em 2020 com defaults mais limpos que Carbon. CodeSnap e Polacode (2018) trouxeram o formato para o VSCode como extensões, permitindo capturar código selecionado sem deixar o editor. A categoria amadureceu em uma peça padrão do kit de criação de conteúdo de cada desenvolvedor. Os padrões (pontos de janela, fundo em gradiente, fonte monoespaçada, tema de sintaxe) se estabilizaram em um genero visual reconhecível.

Fluxos de trabalho práticos

Post no Twitter ou X com um snippet de código

Uma imagem de código em um tweet recebe 3 a 5 vezes o engajamento do mesmo código colado como texto. Cole o snippet, escolha um fundo em gradiente (roxo ou rosa se leem melhor na timeline), marque pontos de janela, deixe números de linha desligados se o snippet tem menos de dez linhas. Baixe PNG, arraste para o compositor de tweet.

Post no LinkedIn para recrutamento técnico

Ao compartilhar uma dica de sexta-feira ou um insight de revisão de código no LinkedIn, uma imagem de código estilizada para o scroll. Imagens do LinkedIn renderizam melhor em 1200 por 627 pixels para o card de pré-visualização; ajuste o slider de padding até a exportação preencher essa proporção de aspecto aproximadamente. O tema Dark Monokai se le bem contra o fundo azul-cinza do LinkedIn.

Imagem hero de post de blog

Para um artigo sobre uma função ou padrão específico, uma imagem estilizada dessa função faz um ótimo hero Open Graph (1200 por 630 pixels). A imagem aparece em cards do Twitter, pré-visualizações de links do Slack e compartilhamentos do Facebook. Pareeé com um bloco real, amigável para copiar e colar <pre><code> dentro do corpo do artigo para acessibilidade.

Slide de conferencia

Em uma apresentação Keynote ou Google Slides, imagens de código com sintaxe realçada escalam nitidamente do monitor ao projetor. Defina o slider de tamanho de fonte para 18 ou 20 pixels para legibilidade da última fila, escolha um tema de alto contraste (Dark Monokai ou GitHub Dark) e use um fundo transparente para que o template de slide apareça através.

Banner README do GitHub

Um README abre melhor com uma imagem de código estilizada mostrando o exemplo hello-world da biblioteca. A imagem vive na pasta docs/ do seu repo, referenciada via Markdown. GitHub renderiza a imagem nativamente na página inicial do projeto, onde o PNG com sintaxe realçada se le melhor que o bloco fenced de texto puro que segue abaixo.

Miniatura de tutorial do YouTube ou B-roll

Para um tutorial de codificação, uma imagem de código de alta resolução funciona como pano de fundo de miniatura ou como B-roll inserido entre segmentos de tela ao vivo. Exporte em tamanho de fonte de 14 a 16 pixels com padding generoso, depois solte no editor e redimensione. A imagem permanece nítida em 1080p ou 4K porque html2canvas renderiza na proporção de pixels do dispositivo.

Armadilhas comuns

Imagens de código não são pesquisáveis

Mecanismos de busca não podem indexar texto dentro de uma imagem (ainda). Se seu blog depende de tráfego do Google, incorpore o código real como um bloco <pre><code> no corpo do artigo. Use a imagem estilizada apenas como miniatura de compartilhamento social ou hero, não como representação primária do código.

Leitores de tela não podem ler código em imagens

Um usuário cego com NVDA, JAWS ou VoiceOver ouve 'imagem' e nada mais quando encontra uma captura de código. Sempre forneça o mesmo código como texto acessível por perto, seja via um atributo alt (snippets curtos) ou um bloco <pre><code> visualmente escondido com a fonte completa. Caso contrário o post é inutilizável para tecnologia assistiva.

Leitores não podem copiar código de imagens

Quando a audiencia quer copiar e executar o código, uma imagem os força a redigitar ou usar OCR. Google Lens e Live Text do macOS fazem OCR razoavelmente bem, mas é fricção. Para tutoriais e how-tos, pareeé a imagem (para apelo visual) com um bloco de texto amigável para copiar e colar (para usabilidade).

Linhas longas envolvem ou são cortadas

Uma consulta SQL de 200 caracteres ou uma expressão JSX profundamente aninhada transborda a moldura. A pré-visualização adiciona uma barra de rolagem horizontal, mas o PNG exportado ou envolve desajeitadamente ou corta. Refatore o snippet para caber em aproximadamente 80 colunas, ou divida-o em múltiplas imagens de código menores. Sempre pré-visualize antes de exportar.

Tema escuro em fundos claros de redes sociais

Uma imagem Monokai escura fica ótima em uma timeline do Twitter em modo escuro mas cria um contraste duro em um feed em modo claro. Adicione padding ao redor da moldura de código escura (o fundo em gradiente colorido ajuda) para que o bloco escuro não bata contra a página branca. Inversamente, temas claros precisam da consideração oposta em feeds em modo escuro.

Realce de versões de linguagem desatualizadas

highlight.js é bom mas atrasa atrás do bleeding edge. Nova sintaxe ES2024 (using disposable resources, decorators) ou recursos async do Rust podem não realçar perfeitamente. O código ainda é legível, mas uma palavra-chave pode aparecer como um identificador puro. Use um realçador diferente (Shiki, Prism) se a coloração exata bleeding-edge importa.

Privacidade e tratamento de dados

Todo realce e rasterização acontecem em seu navegador. highlight.js analisa seu código localmente, html2canvas serializa o DOM renderizado em um PNG, e o download dispara via uma URL de blob. Não transmitimos seu código fonte para nenhum servidor, não registramos entradas, e não armazenamos saídas.

Uma vez carregada a página (incluindo os arquivos CDN do highlight.js e html2canvas), a ferramenta funciona offline. Voce pode desconectar da rede e capturar código proprietário, exemplos de API internos ou qualquer snippet que não deve tocar um serviço de terceiros. As bibliotecas CDN são carregadas uma vez e cacheadas localmente.

Quando não usar uma ferramenta de código para imagem

Blocos de código de blog em produção

Dentro do corpo de um artigo how-to, use blocos <pre><code> reais com um realçador do lado do servidor (Shiki, Prism, highlight.js). Blocos de código reais são selecionáveis, copiáveis, pesquisáveis, acessíveis e estilizáveis via CSS dark-mode. Reserve imagens para o hero, miniatura de compartilhamento social ou floreio visual, não o código de trabalho.

Documentação que precisa ser pesquisável

Se seu site de docs depende de Algolia DocSearch, GitBook search ou qualquer índice de texto completo, código em imagens é invisível para o mecanismo de busca. Engenheiros procurando um nome de função específico não o encontrarão em seu exemplo só de imagem. Sempre use blocos de código reais em documentação indexada.

Arquivos longos ou código multi-tela

Um arquivo de 200 linhas não cabe em uma única imagem em tamanho de fonte legível. Divida-o em pedaços lógicos (uma função por imagem), ou apenas compartilhe um link de gist do GitHub com a fonte completa. Forçar um arquivo longo em um PNG produz uma parede de texto minúsculo ilegível.

Código sensível com segredos visíveis

Capturas de tela de código com chaves de API, URLs de banco de dados ou credenciais codificadas são raspadas do Twitter e indexadas por scanners de segredos do GitHub em horas. O fato de as credenciais estarem em uma imagem não desacelera atacantes; pipelines OCR as pegam. Rotacione imediatamente qualquer segredo que aparece em uma imagem de código pública.

Mais perguntas

PNG ou SVG, qual formato de exportação devo usar?

PNG é o padrão seguro para redes sociais (universalmente suportado, sem perda, tamanho de arquivo pequeno para imagens de código típicas). SVG é mais nítido em qualquer nível de zoom mas não é suportado como conteúdo inline no Twitter, LinkedIn ou na maioria das plataformas sociais. Para incorporação web em seu próprio blog, SVG é tecnicamente melhor; para qualquer compartilhamento social, fique com PNG. Esta ferramenta exporta apenas PNG.

Que texto alt devo escrever?

Para snippets curtos (menos de cinco linhas), coloque o código real no atributo alt. Para snippets mais longos, escreva um resumo de uma frase em alt (por exemplo, 'Função JavaScript que busca dados do usuário e lida com erros 404') e inclua o código completo como um bloco <pre><code> visível por perto. Nunca deixe alt vazio em uma imagem de código.

Que dimensões funcionam para redes sociais?

Twitter/X: 1200 por 675 pixels (16:9), ou 1080 por 1350 para retrato. LinkedIn: 1200 por 627 (paisagem) ou 1200 por 1200 (quadrado). Instagram: 1080 por 1080 (quadrado). Hero Open Graph: 1200 por 630. A ferramenta exporta no tamanho natural da pré-visualização; ajuste padding e fonte para aproximar do aspecto alvo, depois corte ou preencha em seu editor de imagem se voce precisa de dimensões perfeitas ao pixel.

Qual fonte é melhor para imagens de código?

Esta ferramenta usa Fira Code, Cascadia Code ou Consolas (o navegador escolhe a primeira instalada). Fira Code tem ligaduras de programação (=> renderiza como um único glifo de seta) que parecem impressionantes em capturas. JetBrains Mono e Source Code Pro são alternativas igualmente legíveis. Evite generic monospace que pode ser Courier padrão do sistema no Windows, o que parece datado.

Por que a exportação parece um pouco diferente da pré-visualização?

html2canvas rasteriza o DOM reimplementando a renderização CSS em JavaScript. Algumas propriedades (filtros CSS avançados, certos recursos de fonte, pseudo-elementos ::before/::after com fundos complexos) podem renderizar ligeiramente diferentes da pré-visualização ao vivo do navegador. As diferenças são geralmente pequenas, antialiasing sub-pixel ou peso de fonte, mas se a exportação parecer errada, simplifique o estilo.

Como isso se compara ao Carbon (carbon.now.sh)?

Carbon tem mais temas, mais fontes e exportação de GIF animado. Esta ferramenta cobre o caso de 80 por cento (exportação PNG, os temas mais populares, fundos em gradiente, pontos de janela) sem enviar seu código para um servidor de terceiros. Para compartilhamentos pontuais em redes sociais é mais rápido; para personalização pesada ou consistencia de marca entre muitas imagens, a biblioteca de presets do Carbon é difícil de superar.

Ferramentas relacionadas

Verificador de diferenças

Compare dois textos lado a lado.

Minificador CSS

Minifique CSS para reduzir seu tamanho.

Formatador JSON

Formate e valide dados JSON.