Código para imagem
Cole um trecho de código, escolha um dos quatro temas integrados, ajuste cores, tamanho da fonte, espaçamento, cabeçalho opcional e números de linha, e baixe um PNG renderizado a partir de um canvas no navegador. A ferramenta desenha texto simples: é boa para imagens limpas de código, mas não interpreta linguagens nem aplica destaque de sintaxe.
Como criar um PNG de código
-
1
Cole o trecho
Use a caixa de código para JavaScript, HTML, CSS, JSON, comandos de shell ou qualquer outro texto simples. O renderizador mantém até as primeiras 400 linhas.
-
2
Defina o visual
Escolha Escuro, Claro, Dracula ou Solarized, depois ajuste título, tamanho da fonte, espaçamento, fundo, texto e cor de destaque.
-
3
Confira o canvas
O navegador desenha cada linha como texto de canvas, com cabeçalho de janela e números de linha opcionais. Linhas longas podem ampliar o canvas até o limite interno.
-
4
Baixe o PNG
Exporte o canvas atual como imagem PNG para documentação, anotações, slides ou posts. Não há exportação SVG, JPEG ou HTML.
O que o renderizador faz
| Controle | O que você pode alterar | Observações |
|---|---|---|
| Tema | Escuro, Claro, Dracula, Solarized | Cada tema define as cores iniciais de fundo, texto e destaque. |
| Estilo do texto | Título, tamanho da fonte, espaçamento | A fonte fica limitada a 10–40 px e o espaçamento a 20–200 px. |
| Cores | Fundo, texto, destaque | A cor de destaque é usada nos números de linha. |
| Cabeçalho | Cabeçalho estilo janela ligado ou desligado | O título aparece no cabeçalho quando ele está ativo. |
| Números de linha | Mostrar ou ocultar | Os números são desenhados como texto simples no canvas. |
| Exportação | Download PNG | O botão de download salva o canvas atual como imagem PNG. |
Limites práticos
- O navegador desenha o trecho como texto simples com a Canvas API. Ele não detecta JavaScript, Python, HTML nem qualquer outra linguagem.
- A prévia usa as primeiras 400 linhas para que arquivos muito grandes não travem a página.
- A largura do canvas fica entre 420 px e 2200 px. Linhas muito longas podem atingir a largura máxima.
- A versão em dois passos mantém suas entradas em
sessionStoragepara a aba atual enquanto você vai da edição ao download.
Nota de acessibilidade
Código dentro de uma imagem não pode ser pesquisado, copiado nem lido por leitores de tela. Use o PNG como apoio visual e mantenha o trecho real por perto em texto selecionável ao publicar documentação, tutoriais ou relatórios de bug.
Perguntas frequentes
Não. Ela desenha exatamente o texto colado em um canvas. Você pode mudar cores e temas, mas não há seletor de linguagem nem analisador de sintaxe.
O menu inclui Escuro, Claro, Dracula e Solarized. Depois de escolher um tema, você ainda pode alterar fundo, texto e cor de destaque.
Não. A saída é um download PNG criado a partir do canvas. Não há SVG, JPEG nem cópia como HTML.
A prévia desenha as primeiras 400 linhas para manter o navegador responsivo. Para imagens publicadas, normalmente é melhor cortar para as poucas linhas que explicam a ideia.
Ferramentas relacionadas
Referência da Tabela ASCII
Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.
Referência de Caracteres HTML
Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.
Conversor de Tamanho de Arquivo
Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.
Visualizador de Markdown
Escreva Markdown e veja a renderização HTML atualizar ao vivo. Sintaxe com estilo GitHub, incluindo tabelas, listas de tarefas, blocos de código cercados e autolinks.
Gerador de Docker Compose
Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.
Referência de atalhos de teclado
Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.
Ferramenta disponível em outros idiomas
- Kod na obraz [PL]
- Code zu Bild [DE]
- コードを画像に変換 [JA]
- Mã sang ảnh [VI]
- Código a imagen [ES]
- Code naar afbeelding [NL]
- 코드를 이미지로 [KO]
- Kode ke gambar [ID]
- Kod till bild [SV]
- تحويل الكود إلى صورة [AR]
- โค้ดเป็นรูปภาพ [TH]
- Code en image [FR]
- Codice in immagine [IT]
- Код в изображение [RU]
- Kodu görsele dönüştür [TR]
- 代码转图片 [ZH]
- Code to Image [EN]