Como transformar código em uma imagem compartilhável
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.
02
Escolha a linguagem e o tema
Escolha entre 242 gramáticas Shiki e 71 temas distintos. Carregue uma amostra ou cole código; o realce nunca executa a fonte.
03
Estilize a moldura
Ajuste tabulações, sombra, cantos, marca d’água e proporções. Use cor, transparência ou PNG/JPEG/WebP local (8 MiB), com espaçamento, fonte, números de linha e título.
04
Gere a pré-visualização
Ao abrir o espaço de trabalho, o Shiki carrega nesta aba e gera uma prévia real do exemplo. Editar limpa o resultado anterior; clique em “Gerar prévia” para renderizar as alterações.
05
Baixe o SVG ou PNG
Gere novamente após editar. Baixe SVG ou PNG em 1×/2×, ou copie PNG. Se a área de transferência falhar, baixe PNG. Limite: 4096 pixels por lado e 16.777.216 no total.
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 JavaScript medido em 1×
Insira duas linhas: const total = 2 + 3; e console.log(total); (40 bytes UTF-8). Defina JavaScript, Escuro, #111827, margem 64 px, fonte 16 px, números de linha ativos, título sum.js, 1×, tabulação 2, sombra desligada, raio 14 px, sem marca d’água, proporções automáticas e fonte do sistema. Ao gerar e baixar, este teste local no Chromium produziu PNG de 406 × 270 pixels (13.206 bytes) e SVG de 1.647 bytes com viewBox 406 × 270.
Comparar o mesmo trecho em 2×
Mantenha o código e os ajustes do exemplo 1, selecione 2×, gere novamente e baixe PNG: 812 × 540 pixels e 32.328 bytes neste teste local no Chromium. Todas as dimensões e tamanhos aqui são medições que podem variar conforme a fonte e o navegador. SVG sem fonte incorporada depende das fontes do sistema e pode parecer diferente em outro dispositivo.
Incorporar uma fonte latina e cirílica
Insira const text = "Café Привет"; com título font.js e os ajustes 1× do exemplo 1. Envie ToolarsWatermarkWestern.ttf (102.840 bytes), descompactada de https://toolars.com/fonts/pdf-watermark/western-v1.ttf.gz; esta fonte de teste deriva de Noto Sans CJK versão Sans2.004 sob SIL OFL 1.1 (licença: https://toolars.com/fonts/pdf-watermark/OFL.txt). Este teste local no Chromium produziu PNG de 403 × 245 pixels (10.376 bytes) e SVG de 138.612 bytes com a fonte completa. A fonte não contém os glifos 漢字 e impede a geração; escolha outra fonte ou as do sistema.
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?
O código é processado nesta aba e nunca é executado nem enviado. O Shiki carrega ao abrir o espaço de trabalho para gerar o exemplo; após editar, é preciso clicar em “Gerar prévia”.
Quais linguagens e temas estão disponíveis?
Escolha entre 242 gramáticas Shiki e 71 temas distintos. Carregue uma amostra ou cole código; o realce nunca executa a fonte.
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.
