Codice in immagine
Incolla uno snippet di codice, scegli uno dei quattro temi integrati, regola colori, dimensione del font, spaziatura, intestazione opzionale e numeri di riga, poi scarica un PNG renderizzato da un canvas del browser. Lo strumento disegna testo semplice: è utile per immagini di codice pulite, ma non interpreta linguaggi e non aggiunge evidenziazione della sintassi.
Come creare un PNG di codice
-
1
Incolla lo snippet
Usa l’area di codice per JavaScript, HTML, CSS, JSON, comandi shell o qualunque altro testo semplice. Il renderer mantiene al massimo le prime 400 righe.
-
2
Imposta lo stile
Scegli Scuro, Chiaro, Dracula o Solarized, poi regola titolo, dimensione del font, spaziatura, sfondo, testo e colore di accento.
-
3
Controlla il canvas
Il browser disegna ogni riga come testo canvas, con intestazione finestra e numeri di riga opzionali. Le righe lunghe possono allargare il canvas fino al massimo previsto.
-
4
Scarica il PNG
Esporta il canvas corrente come immagine PNG per documentazione, note, slide o post social. Non sono inclusi export SVG, JPEG o HTML.
Cosa fa il renderer
| Controllo | Cosa puoi modificare | Note |
|---|---|---|
| Tema | Scuro, Chiaro, Dracula, Solarized | Ogni tema imposta i colori iniziali di sfondo, testo e accento. |
| Stile del testo | Titolo, dimensione del font, spaziatura | Il font è limitato a 10–40 px e la spaziatura a 20–200 px. |
| Colori | Sfondo, testo, accento | Il colore di accento viene usato per i numeri di riga. |
| Intestazione | Intestazione stile finestra attiva o disattiva | Il titolo appare nell’intestazione quando è attiva. |
| Numeri di riga | Mostra o nascondi | I numeri sono disegnati come semplice testo canvas. |
| Esportazione | Download PNG | Il pulsante di download salva il canvas corrente come immagine PNG. |
Limiti pratici
- Il browser disegna lo snippet come testo semplice con la Canvas API. Non riconosce JavaScript, Python, HTML o altri linguaggi.
- L’anteprima usa le prime 400 righe per evitare che file molto grandi blocchino la pagina.
- La larghezza del canvas resta tra 420 px e 2200 px. Le righe molto lunghe possono raggiungere la larghezza massima.
- La versione in due passaggi conserva i dati in
sessionStorageper la scheda corrente mentre passi dalla modifica al download.
Nota sull’accessibilità
Il codice dentro un’immagine non è ricercabile, copiabile o disponibile per gli screen reader. Usa il PNG come supporto visivo e mantieni vicino lo snippet reale in testo selezionabile quando pubblichi documentazione, tutorial o segnalazioni di bug.
Domande frequenti
No. Disegna sul canvas esattamente il testo che incolli. Puoi cambiare colori e temi, ma non ci sono selettore di linguaggio o parser di sintassi.
Il menu include Scuro, Chiaro, Dracula e Solarized. Dopo la scelta puoi comunque modificare sfondo, testo e colore di accento.
No. Il risultato è un download PNG creato dal canvas. Non sono disponibili export SVG, JPEG o copia come HTML.
L’anteprima disegna le prime 400 righe per mantenere reattivo il browser. Per immagini pubblicate conviene spesso tagliare alle poche righe che spiegano l’idea.
Strumenti correlati
Riferimento Tabella ASCII
Tabella ASCII completa da 0 a 127 con decimale, esadecimale, ottale, binario e riferimento numerico HTML per ogni carattere, inclusi i codici di controllo come NUL, LF e DEL.
Generatore di lettere casuali
Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.
Riferimento ai caratteri HTML
Elenco ricercabile delle entità HTML, dei loro codici nominati e numerici, e copia con un clic per caratteri e simboli speciali.
Riferimento scorciatoie da tastiera
Cerca le scorciatoie predefinite documentate di VS Code, Chrome e Bash con GNU Readline su macOS, Windows e Linux.
Semplificatore di Algebra Booleana
Valuta un'espressione booleana per ogni combinazione di input e mostra la tabella della verità completa. Supporta fino a cinque variabili e gli operatori &, |, ! e ^.
Trova nome colore
Trova il colore CSS standard con nome più vicino a un valore HEX, RGB o HSL usando la differenza CIEDE2000.