Pular para o conteúdo
Toolars
Explorar
Reportar erro

Desenvolvimento · utilitário Local

Código para imagem

Code to Image Converter

Exporte código com destaque de sintaxe como PNG ou SVG em seis linguagens, com temas claro e escuro, numeração, título e escala 1x ou 2x.

Caminho da tarefa / da entrada ao resultado

Cole seu código

Roda localmente · Nada é enviado

Como Código para imagem funciona, privacidade e ferramentas relacionadas

Caminho da tarefa / da entrada ao resultado

Como transformar código em uma imagem compartilhável

  1. 01

    Cole seu código

    Digite ou cole no campo Código-fonte — até 65.536 bytes UTF-8, no máximo 200 linhas e 240 caracteres por linha. O contador ao lado do rótulo mostra a contagem atual de bytes contra o limite, e qualquer coisa além de um limite é recusada com uma mensagem que o indica, então você sabe exatamente o que cortar.

  2. 02

    Escolha a linguagem e o tema

    Escolha JavaScript, TypeScript, HTML, CSS, JSON ou Bash em Linguagem, depois defina o Tema como Claro ou Escuro. As cores de sintaxe vêm da gramática Shiki correspondente e de um tema no estilo GitHub, e Carregar exemplo preenche o campo com um pequeno exemplo na linguagem selecionada para você comparar os visuais antes de colar o seu.

  3. 03

    Estilize a moldura

    Defina a Cor de fundo, o Preenchimento de 16 a 96 px e o Tamanho da fonte de 12 a 28 px, depois adicione um Título da janela de até 80 caracteres, ative Mostrar números de linha e escolha uma Escala de exportação de 1x ou 2x. A altura da linha acompanha o tamanho da fonte automaticamente, então texto maior continua legível sem ajustes extras.

  4. 04

    Gere a pré-visualização

    Gerar carrega o tokenizador local, mede as sequências reais de fonte e o título da janela, e exibe o mesmo SVG com escape usado na exportação. O código permanece texto inerte. Edições limpam a pré-visualização antiga. Saídas grandes demais ou impossíveis de medir são recusadas; pré-visualizações largas podem ser roladas com o teclado.

  5. 05

    Baixe o SVG ou PNG

    Use Baixar SVG para o arquivo vetorial escalável, ou Baixar PNG para um bitmap renderizado via Canvas na escala escolhida. Os dois arquivos são produzidos localmente, e se a combinação escolhida exceder o tamanho seguro de exportação, o espaço de trabalho avisa em vez de gravar um arquivo corrompido.

Fatos da ferramenta

Processamento
No seu navegador
A entrada sai deste dispositivo
Nunca
Retenção
Nada é armazenado
Preço
Grátis

Sua entrada fica no navegador.

Código para imagem usa seu caminho de execução local verificado e não cria um histórico oculto de entradas ou saídas.

Execução local

Roda dentro da aba atual do navegador.

Sem processamento oculto

Os dados ativos da ferramenta nunca viram um registro de documento do Toolars.

Não precisa de conta

Use o fluxo principal sem criar um perfil. Os favoritos sincronizam com sua conta depois que você entra.

Redefinição imediata

Limpe a aba e os dados de trabalho ativos desaparecem.

Quando Código para imagem é útil

Exportar um trecho de duas linhas

Cole duas linhas: const total = 2 + 3; e console.log(total); (40 bytes UTF-8). Escolha JavaScript, Escuro, fundo #111827, preenchimento 64 px, fonte 16 px, números de linha ativos, título sum.js e 1×. No teste local de 2026-09-24, gerar a prévia e baixar PNG produziu toolars-code-image.png, 406 × 270 pixels e 12.784 bytes. A imagem mostra o código, sem executá-lo.

Comparar 1×, 2× e SVG

Mantenha código e ajustes, mude para 2×, gere novamente e baixe o PNG. O arquivo de 2026-09-24 tinha 812 × 540 pixels e 31.366 bytes. Em 1×, baixar SVG gerou toolars-code-image.svg (1.647 bytes) com viewBox 406 × 270. A escala muda pixels PNG, não o código; dimensões e bytes variam conforme fonte e navegador. Um SVG sem fonte incorporada pode parecer diferente.

Recuperar de uma origem vazia

Esvazie Código-fonte e gere a prévia. A área pede código e desativa ambos os downloads. Cole as mesmas duas linhas e gere outra vez; alterações apagam a prévia anterior. Se a exportação ultrapassar 4.096 pixels por lado, use 1× ou reduza preenchimento e fonte.

O que Código para imagem realmente faz

Uma função da qual você se orgulha merece lugar nas notas de versão; um trecho complicado precisa ilustrar a wiki interna; um slide de conferência pede um fragmento estilizado em vez de uma captura de tela com abas cortadas. O conversor de código para imagem transforma o trecho em uma moldura polida com números de linha e título de janela, e o SVG ou PNG exportado entra direto em slides, documentos e chats sem nenhuma limpeza manual. Como a tokenização e a renderização acontecem nesta aba, código-fonte não publicado nunca viaja para lugar nenhum.

Perguntas frequentes

Como criar uma imagem JavaScript para um slide?
Digite const total = 2 + 3; e escolha JavaScript, tema claro e 1x. Gere a prévia e baixe PNG. A imagem mostra o código, não o resultado 5: a ferramenta não executa código. Para uma imagem maior, mude para 2x e gere novamente; largura e altura dobram.
Como exportar um exemplo JSON como SVG?
Digite {"ok":true}, escolha JSON e gere a prévia. Baixe SVG para uma ilustração escalável ou PNG para manter a aparência renderizada. Após editar o texto, gere novamente: a prévia anterior é apagada. É uma exportação de imagem, não uma validação de JSON.
Quais são os limites de entrada?
Até 65.536 bytes UTF-8 de código, no máximo 200 linhas com até 240 caracteres cada, e um título de janela de 80 caracteres ou menos. A exportação em si é limitada a 4.096 pixels por lado e 16.777.216 pixels no total; qualquer coisa além desses limites é recusada com uma mensagem específica.
Meu código é enviado ou executado?
Nenhum dos dois. O tokenizador Shiki carrega dentro desta aba somente quando você pressiona Gerar pré-visualização, a pré-visualização é construída a partir de tokens de texto em vez de HTML injetado, e o código-fonte nunca é enviado a lugar nenhum nem retido depois que você limpa o espaço de trabalho.
Quais linguagens e temas estão disponíveis?
Seis linguagens — JavaScript, TypeScript, HTML, CSS, JSON e Bash — cada uma tokenizada com sua própria gramática Shiki. Os temas Claro e Escuro são paletas no estilo GitHub, e o controle de Cor de fundo estiliza a moldura ao redor do cartão independentemente do tema que você escolher.
O que a Escala de exportação muda?
1x usa as dimensões medidas da imagem. 2x dobra largura e altura, produzindo quatro vezes mais pixels no PNG; não adiciona detalhe ao código nem muda o texto. As duas escalas devem caber nos limites de exportação. Reduza a escala se a exportação ficar grande demais.
Devo baixar o SVG ou o PNG?
O PNG preserva os pixels renderizados aqui. O SVG permanece escalável; sem uma fonte enviada, ele depende das fontes do sistema, que podem mudar em outro dispositivo. Uma fonte enviada e aceita é incorporada por completo, mas o visualizador de destino precisa suportar fontes incorporadas. Use PNG quando a aparência consistente importa.
Por que a pré-visualização sumiu depois que mudei uma configuração?
Por decisão de design: qualquer edição no código, linguagem, tema, fundo, preenchimento, tamanho da fonte, título, números de linha ou escala invalida a pré-visualização antiga em vez de mostrar uma imagem desatualizada. Pressione Gerar pré-visualização de novo para renderizar a moldura atualizada.
Quais fontes posso incorporar?
TTF/OTF, até 24 MiB. Escolha uma fonte que você tem permissão de incorporar. Fontes de contorno estáticas com incorporação irrestrita são suportadas; fontes variáveis ou coloridas são recusadas. A fonte completa é incluída no SVG. Glifos ausentes interrompem a geração. Nenhum arquivo é enviado. Sem uma fonte, o SVG usa fontes do sistema.

Continue lendo

Continuar em Desenvolvimento

Tarefas relacionadas, não um beco sem saída.

Passe para outro espaço de trabalho focado sem voltar ao índice completo.

Gerador de slug de URL

URL Slug Generator

Transforme títulos em slugs de URL limpos com hífens ou sublinhados — acentos removidos, & expandido, escritas não latinas preservadas — ao vivo.

Criar

Sombras para React Native

React Native Shadow Generator

Compare propriedades de sombra legadas e boxShadow no React Native, ajuste iOS e Android lado a lado e copie o código do StyleSheet.

Criar

Codificador/decodificador Base64

Base64 Encoder/Decoder

Codifique texto Unicode em Base64 ou decodifique de volta com validação ao vivo, opções URL-safe e UTF-8 e botão de troca para ida e volta.

Converter

Codificador/decodificador HTML

HTML Encoder/Decoder

Escape os cinco caracteres que quebram marcação ou decodifique entidades nomeadas e numéricas de volta em texto, com ida e volta em um clique.

Converter