Código para imagem: crie capturas de código legíveis para partilhar
Precisa de uma captura de código para um tutorial, uma apresentação ou uma atualização do projeto? Cole um excerto curto no Code to Image, escolha a linguagem, ajuste a apresentação e exporte um PNG. Não precisa de incluir todo o IDE, os separadores abertos ou o ambiente de trabalho.
O importante é que o excerto seja legível no tamanho em que o publica. Este guia acompanha uma exportação real de código para imagem, verifica números de linha e mudanças de linha e mantém uma fonte Markdown copiável junto da imagem.
- Abra o gerador de capturas de código e cole apenas o código que quer mostrar. Não inclua delimitadores Markdown no editor específico de código.
- Selecione explicitamente a linguagem. Verifique o realce de palavras-chave, cadeias de texto e comentários; as cores não provam que o código esteja correto.
- Escolha o tema e o tipo de letra. Ative os números de linha se a explicação referir linhas concretas e ajuste a área da imagem para que a linha mais longa seja legível.
- Exporte um PNG e abra a transferência. Verifique primeira e última linha, indentação, chavetas e rodapé no tamanho que o leitor irá ver.
Remova a preparação irrelevante antes de reduzir a letra ou criar uma imagem demasiado alta. Se precisar de um módulo inteiro, partilhe o ficheiro fonte e use a imagem para destacar apenas uma parte.
Esta função auxiliar JavaScript formata uma indicação de nova tentativa. Não envia pedidos, não agenda tentativas nem implementa uma política de repetição para produção. O exemplo curto facilita a verificação da indentação, aspas e chavetas de fecho na exportação.
Guarde esta versão Markdown no artigo ou repositório. Para usar o editor específico, copie apenas o JavaScript dentro do bloco:
```javascript
function retryLabel(attempt, limit = 3) {
if (attempt >= limit) {
return "Stop and review";
}
return `Retry ${attempt + 1} of ${limit}`;
}
console.log(retryLabel(0));
```
A fonte é igual nas seis versões linguísticas para permitir reproduzir o resultado. Para esclarecer a sintaxe dos delimitadores, em vez do desenho da imagem, consulte o guia de blocos de código Markdown.
Abra o PNG completo antes de reutilizar a apresentação. Esta imagem foi gerada no editor específico real, com JavaScript selecionado, números de linha ativos e saída de imagem a 2×. Mantém a marca da exportação gratuita. É um excerto efetivamente renderizado, não uma captura inventada de um IDE nem um resultado de desempenho.
Este tipo de imagem serve de referência visual num tutorial ou discussão de equipa. A numeração permite apontar a condição ou a instrução de retorno, mas o leitor continua a precisar da versão em texto para copiar e inspecionar o código.
| Problema | O que alterar |
|---|---|
| O texto fica minúsculo ao inserir a imagem | Mostrar menos linhas ou aumentar a área de apresentação |
| Uma expressão longa muda de linha inesperadamente | Alargar a área ou encurtar o exemplo sem mudar o significado |
| As referências às linhas não coincidem | Manter a mesma fonte e configuração de numeração na explicação |
| Comentários ou cadeias de texto confundem-se com o fundo | Escolher mais contraste e inspecionar a transferência |
| A última linha ou o rodapé fica cortado | Verificar a altura ou abandonar uma disposição de altura fixa |
| O original é nítido mas a versão partilhada não | Verificar também a versão carregada ou inserida |
Uma resolução superior fornece mais píxeis, mas não torna um excerto longo legível numa coluna estreita. Não recorte o início, chavetas de fecho ou a marca de forma a tornar o exemplo enganador. Para formatos sociais, consulte o processo de partilha de imagens Markdown.
Coloque a fonte delimitada antes ou depois da imagem, ou ligue ao ficheiro correspondente. O texto alternativo deve descrever a linguagem e o objetivo do exemplo. Evite que a imagem seja o único local onde se encontra um comando ou um detalhe importante da implementação.
A imagem preserva a apresentação; o texto permite copiar, pesquisar e rever o código. Se a explicação for tão importante como o excerto, o editor Markdown permite juntar títulos, prosa e código numa imagem. Se o código for o foco, começar pela ferramenta específica é mais direto.
Sim, as exportações gratuitas no navegador incluem marca. Segundo a verificação de 3 de novembro de 2026, uma conta gratuita com sessão iniciada recebe cinco exportações sem marca de água no total. Para mais, consulte o Creator ou o passe de uma exportação na página de preços. Os novos créditos de API aplicam-se à API, não à remoção de marcas nas exportações do navegador.
Comece pelo PNG para este exemplo dominado por texto. A ferramenta também oferece JPEG, WebP e PDF para entrega de documentos. Verifique o ficheiro depois de exportar e depois de o carregar; este guia não afirma limites atuais de envio nem regras de recompressão de qualquer plataforma.
Este processo formata código para uma imagem; não prova que tenha sido executado ou passado em testes. Reveja e teste o original no ambiente adequado antes de o recomendar.
Não. A exportação é processada no servidor e não deve assumir uma ocultação automática de dados. Remova credenciais, endereços privados e dados pessoais antes de carregar o excerto e siga as regras da sua organização. Este guia não promete funcionamento sem ligação nem uma política específica de conservação.
Prepare um excerto curto, exporte-o como imagem de código e verifique a transferência no tamanho de apresentação previsto. Junte a fonte correspondente e uma explicação breve da linha importante. Assim obtém uma imagem fácil de partilhar sem impedir o leitor de trabalhar com o código.