Screenshot de código
Code Screenshot
Renderiza um trecho de código como imagem com destaque de sintaxe, moldura de janela e tema escolhido.
Transforma um trecho de código em um PNG que você pode colocar em um slide, uma issue ou um post: com realce de sintaxe, em uma moldura de janela, na escala de exportação que você escolher. Ele é desenhado em um canvas aqui; nada é enviado e nenhum realçador externo é carregado.
Código
Prévia
O que esta ferramenta faz
- · O destaque de sintaxe vem dos tokenizadores que os formatadores deste site usam (JavaScript, TypeScript, CSS, HTML, SQL) mais uns pequenos escritos aqui (JSON, Python, Go, Rust, Shell). Nenhum destacador externo é carregado.
- · O texto é desenhado direto num canvas com a fonte monoespaçada que o seu dispositivo tiver. O coreano cai numa fonte coreana do sistema, então sai como texto e não como quadradinhos, e coreano e emoji contam como duas células na quebra de linha. As fontes mudam de um dispositivo para outro, então o mesmo código fica um pouco diferente em cada um.
- · Os PNG saem em 1×, 2× e 3×, e nada é enviado para lugar nenhum.
Para deixar o PNG menor, use a compressão PNG; para colocar num quadro de dispositivo, use o mockup de dispositivo.
Como usar
Cole o código
A linguagem é detectada, e você pode sobrescrever. O realce usa os mesmos tokenizadores dos formatadores deste site para JS, TS, CSS, HTML e SQL, mais outros pequenos para JSON, Python, Go, Rust e Shell.
Defina a moldura
Tema, tamanho da fonte, margem interna, um título de janela, semáforo ou nenhum, números de linha, uma sombra. A pré-visualização é a exportação em 1×.
Escolha uma largura de quebra para linhas longas
Emojis e caracteres CJK contam como duas células na quebra, do jeito que um terminal os conta, então uma linha com escritas misturadas quebra onde parece que deveria.
Exporte em 2× para qualquer lugar em que vá ser redimensionado
1× para um blog de largura fixa, 2× para slides e telas retina, 3× quando vai ser ampliado. Ou copie a imagem direto para a área de transferência.
Perguntas frequentes
Por que fica diferente no meu outro computador?
Porque o texto é desenhado com a fonte monoespaçada que aquele dispositivo tem, e não há duas máquinas com exatamente a mesma. Emojis e caracteres CJK, em particular, caem na fonte do sistema que estiver instalada. A contrapartida é que nada é baixado e a renderização é instantânea.
Posso obter um SVG?
Não, só PNG. Um SVG precisaria da fonte embutida para ficar igual em qualquer lugar, e embutir uma fonte com emoji ou CJK são megabytes. Um PNG em 2× é menor e renderiza idêntico em todo lugar.
Devo mesmo publicar uma captura de tela de código?
Para um slide ou um post em rede social, sim. Para um relatório de bug ou um pull request, cole o texto: uma imagem não pode ser pesquisada, copiada, comparada nem lida por um leitor de tela. Esta ferramenta é para o primeiro caso.
Pode receber de
Formatador e minificador de JavaScript
JavaScript Beautifier & Minifier
Remove comentários e espaços de JavaScript ou TypeScript sem renomear nada, e reindenta um bundle minificado para que dê para ler de novo.
Gerador de tabela ASCII
ASCII Table Generator
Renderiza uma tabela em ASCII monoespaçado, Markdown ou bordas de desenho de caixa, para READMEs e comentários.
Arte ASCII de texto
ASCII Text Art
Renderiza texto como letras grandes em ASCII por um renderizador FIGfont de verdade, com duas fontes incluídas e espaço para um .flf seu.
Editor de diagramas ASCII
ASCII Diagram Editor
Desenha caixas, linhas, setas e rótulos numa grade de caracteres, derivando cada canto e junção dos vizinhos ocupados, em box drawing Unicode ou ASCII puro.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Gerador de tabela ASCII
ASCII Table Generator
Renderiza uma tabela em ASCII monoespaçado, Markdown ou bordas de desenho de caixa, para READMEs e comentários.
Mockup de dispositivo
Device Mockup
Coloca um print dentro de uma moldura de celular, tablet, notebook ou navegador, com fundo e sombra.
Formatador e minificador de JavaScript
JavaScript Beautifier & Minifier
Remove comentários e espaços de JavaScript ou TypeScript sem renomear nada, e reindenta um bundle minificado para que dê para ler de novo.
Compressor de PNG
PNG Compressor
Quantiza a paleta e reescreve o fluxo deflate para reduzir um PNG sem alterar as dimensões — sem enviar arquivos, tudo no seu navegador.
Codificar e decodificar Base64
Base64 Encoder & Decoder
Codifica e decodifica Base64 e Base64URL para texto ou arquivos, tratando UTF-8 corretamente.
JSON ⇄ CSV conversor
JSON ⇄ CSV
Achata JSON aninhado em colunas ou reconstrói objetos a partir de uma tabela, com uma regra de nome de coluna por caminho com pontos.