Código em imagem

O que é Código em imagem?

Código em imagem é uma ferramenta gratuita, baseada no navegador, que transforma um trecho de código em uma imagem para compartilhar — um cartão de código estilizado com realce de sintaxe para um post de blog, uma apresentação, um README ou uma publicação em redes sociais. Ela realça mais de 20 linguagens, incluindo JavaScript, TypeScript, Python, Go, Rust, Java, SQL e mais, com uma detecção automática opcional que adivinha a linguagem a partir do seu código. Componha o cartão com um de sete temas, um gradiente predefinido, uma cor ou gradiente personalizado, ou um fundo transparente, e depois ajuste a fonte monoespaçada, o tamanho da fonte, o espaçamento, os números de linha, o título da janela e a largura de saída. O cartão é renderizado em tempo real enquanto você edita, e você pode exportá-lo como PNG em 1x, 2x ou 3x, salvá-lo como SVG ou copiá-lo para a área de transferência.

Como usar Código em imagem

1. Cole ou digite seu código, ou conecte a saída de texto de outra ferramenta à porta de entrada no espaço de trabalho.
2. Escolha a linguagem correspondente ou ative a Detecção automática nas Configurações para a ferramenta adivinhá-la a partir do seu código.
3. Escolha um tema e um fundo — um gradiente predefinido, uma cor sólida ou gradiente personalizado, ou transparente — nas Configurações.
4. Ajuste a gosto a fonte monoespaçada, o tamanho da fonte, o espaçamento, os números de linha, o título da janela e a largura de saída.
5. Acompanhe a pré-visualização atualizar em tempo real enquanto edita; clique nela para ampliá-la na visualização com zoom.
6. Exporte o cartão como PNG em 1x–3x, baixe-o como SVG ou copie a imagem para a área de transferência.

Exemplos

Perguntas frequentes

Quais linguagens ele consegue realçar?

Mais de 20, incluindo JavaScript, TypeScript, JSX/TSX, HTML, CSS, JSON, Python, Bash, Java, C, C++, C#, Go, Rust, Ruby, PHP, SQL, YAML, Markdown, Kotlin, Swift e GraphQL. Escolha uma no menu ou ative a Detecção automática para a linguagem ser adivinhada a partir do seu código.

O que posso exportar, e com qual qualidade?

Exporte um PNG com densidade de pixels 1x, 2x ou 3x, salve um SVG vetorial ou copie a imagem direto para a área de transferência. Ao escolher o fundo Transparente, o PNG mantém um canal alfa sem nenhum fundo atrás do cartão.

Posso mudar a aparência do cartão?

Sim. Alterne entre sete temas, escolha um gradiente predefinido, uma cor sólida ou gradiente personalizado, ou um fundo transparente, e ajuste a fonte monoespaçada, o tamanho da fonte, o espaçamento, os números de linha, o título de janela editável e a largura de saída.

Meu código é enviado para algum lugar?

Não. Tanto o realce de sintaxe (Prism) quanto a captura da imagem (html-to-image) rodam 100% no lado do cliente, no seu navegador. Seu código nunca é enviado, transmitido aos nossos servidores nem compartilhado, então até trechos proprietários permanecem no seu dispositivo.

Por que a imagem só aparece depois de eu clicar em Baixar na página da ferramenta?

Na página independente, o PNG é gerado quando você pressiona Baixar, Copiar imagem ou Baixar SVG, então digitar não recaptura a imagem a cada tecla. A pré-visualização estilizada continua atualizando em tempo real; no espaço de trabalho o PNG se reconstrói automaticamente para poder fluir até a próxima ferramenta.