Immagine di un frammento di codice
Code Screenshot
Disegna un frammento di codice come immagine, con evidenziazione della sintassi, cornice di finestra e tema a scelta.
Trasforma un frammento di codice in un PNG da mettere in una slide, in una issue o in un post — con la sintassi evidenziata, dentro una cornice di finestra, alla scala di esportazione che si sceglie. Viene disegnato qui su un canvas: non viene caricato nulla e non viene richiesto nessun evidenziatore esterno.
Codice
Anteprima
Che cosa fa questo strumento
- · L’evidenziazione della sintassi arriva dai tokenizer che usano i formattatori di questo sito (JavaScript, TypeScript, CSS, HTML, SQL), più alcuni piccoli scritti qui (JSON, Python, Go, Rust, Shell). Non viene caricato nessun evidenziatore esterno.
- · Il testo viene disegnato direttamente su un canvas con il carattere monospazio che hai sul dispositivo. Il coreano ricade su un carattere coreano di sistema, così esce come testo e non come quadratini, e coreano ed emoji contano due celle quando si va a capo. I caratteri cambiano da un dispositivo all’altro, quindi lo stesso codice viene un po’ diverso su ognuno.
- · I PNG escono a 1×, 2× e 3×, e non viene caricato nulla da nessuna parte.
Per rendere il PNG più piccolo usa la compressione PNG; per metterlo in una cornice di dispositivo usa il mockup del dispositivo.
Come si usa
Incollare il codice
Il linguaggio viene riconosciuto, e lo si può forzare a mano. L’evidenziazione usa gli stessi tokenizzatori dei formattatori di questo sito per JS, TS, CSS, HTML e SQL, più altri piccoli per JSON, Python, Go, Rust e Shell.
Impostare la cornice
Tema, corpo del carattere, spaziatura interna, un titolo di finestra, i pallini del semaforo oppure nessuno, i numeri di riga, un’ombra. L’anteprima è l’esportazione a 1×.
Scegliere la larghezza a cui mandare a capo le righe lunghe
I caratteri CJK e le emoji contano come due celle quando si va a capo, come li conta un terminale, così una riga con scritture miste va a capo dove sembra che debba andarci.
Esportare a 2× per ogni posto in cui verrà ridimensionato
1× per un blog a larghezza fissa, 2× per le slide e gli schermi retina, 3× quando ci si zoomerà dentro. Oppure si copia l’immagine direttamente negli appunti.
Domande frequenti
Perché sull’altro computer si vede diverso?
Perché il testo viene disegnato con il font a spaziatura fissa che quel dispositivo ha, e non ci sono due macchine con esattamente lo stesso. I caratteri CJK e le emoji in particolare ripiegano sul carattere di sistema che risulta installato. In cambio non si scarica nulla e il rendering è immediato.
Si può avere un SVG?
No, solo PNG. Un SVG avrebbe bisogno del font incorporato per apparire uguale ovunque, e incorporare un font con copertura CJK o emoji sono megabyte. Un PNG a 2× è più piccolo e viene reso in modo identico ovunque.
Conviene davvero pubblicare uno screenshot di codice?
Per una slide o un post sui social, sì. Per una segnalazione di bug o una pull request, meglio incollare il testo: un’immagine non si può cercare, copiare, confrontare con un diff né far leggere a uno screen reader. Questo strumento serve al primo caso.
Può ricevere da
Formattatore e minificatore JavaScript
JavaScript Beautifier & Minifier
Toglie commenti e spazi da JavaScript o TypeScript senza rinominare niente, e re-indenta un bundle minificato perché torni leggibile.
Generatore di tabelle ASCII
ASCII Table Generator
Disegna una tabella in ASCII a spaziatura fissa, in Markdown o con i bordi a caratteri di riquadro, per i README e i commenti.
Scritte in ASCII art
ASCII Text Art
Disegna il testo in lettere ASCII grandi passando per un vero motore FIGfont, con due caratteri inclusi e uno spazio per un .flf tuo.
Editor di diagrammi ASCII
ASCII Diagram Editor
Disegna riquadri, linee, frecce ed etichette su una griglia di caratteri, ricavando ogni angolo e ogni incrocio da quali celle vicine sono occupate, in caratteri di riquadro Unicode o in puro ASCII.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Generatore di tabelle ASCII
ASCII Table Generator
Disegna una tabella in ASCII a spaziatura fissa, in Markdown o con i bordi a caratteri di riquadro, per i README e i commenti.
Mockup su dispositivo
Device Mockup
Mette una schermata dentro la cornice di un telefono, di un tablet, di un portatile o di un browser, con sfondo e ombra.
Formattatore e minificatore JavaScript
JavaScript Beautifier & Minifier
Toglie commenti e spazi da JavaScript o TypeScript senza rinominare niente, e re-indenta un bundle minificato perché torni leggibile.
Comprimere PNG
PNG Compressor
Riduce la tavolozza e riscrive il flusso deflate per far dimagrire un PNG senza cambiarne le dimensioni in pixel.
Codificatore e decodificatore Base64
Base64 Encoder & Decoder
Codifica e decodifica in Base64 e Base64URL testo o file, trattando correttamente l’UTF-8.
Conversione JSON ⇄ CSV
JSON ⇄ CSV
Appiattisce il JSON annidato in colonne o ricostruisce gli oggetti da una tabella, con i nomi di colonna a percorso puntato.