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 que você pode inserir em um post de blog, uma apresentação, um README ou uma publicação em redes sociais. É popular entre desenvolvedores, redatores técnicos e educadores que querem um código com aparência caprichada em vez de colar uma captura de tela sem graça. Escolha o realce para JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python ou Bash e, em seguida, componha o cartão com um tema, um fundo em gradiente ou sólido e o espaçamento de sua preferência. O cartão é renderizado em tempo real enquanto você edita, e um único botão Baixar PNG o exporta em resolução 2x.

Como usar Código em imagem

1. Cole ou digite seu código no editor, ou conecte a saída de texto de outra ferramenta à porta de entrada no espaço de trabalho.
2. Escolha a linguagem correspondente — JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python ou Bash — para que o realce de sintaxe fique correto.
3. Abra as Configurações para escolher um tema (Midnight, Graphite ou Snow), um fundo (Aurora, Sunset, Ocean, Slate ou Transparente) e o espaçamento (Compacto, Normal ou Amplo).
4. Acompanhe a pré-visualização atualizar em tempo real conforme você digita e altera as opções; clique nela para ampliá-la na visualização com zoom.
5. Pressione Baixar PNG para salvar o cartão como imagem em alta resolução ou, no espaço de trabalho, envie o PNG diretamente para uma ferramenta de imagem na sequência.

Exemplos

Perguntas frequentes

Quais linguagens ele consegue realçar?

Ele realça JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python e Bash. Escolha a que corresponde ao seu trecho no menu suspenso de linguagens; se um token não puder ser classificado, ele simplesmente volta para a cor de texto base.

Em qual formato de imagem ele exporta?

Ele exporta um PNG com densidade de pixels 2x para resultados nítidos. Se você escolher a opção de fundo Transparente, o PNG mantém um canal alfa sem nenhum fundo atrás do cartão de código.

Posso mudar a aparência do cartão?

Sim. Nas Configurações você pode alternar entre os temas Midnight, Graphite e Snow, escolher um fundo Aurora, Sunset, Ocean, Slate ou Transparente e definir um espaçamento Compacto, Normal ou Amplo ao redor do código.

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 PNG, então digitar não recaptura a imagem a cada tecla. A pré-visualização estilizada ainda atualiza em tempo real enquanto você edita; no espaço de trabalho o PNG também se reconstrói automaticamente para poder fluir até a próxima ferramenta.