Codice in Immagine: Trasforma Snippet di Codice in Screenshot PNG o SVG | We.Inc
Incolla il codice e ottieni un'immagine pulita: colori di sintassi, sei temi, sfondi sfumati, barra della finestra, numeri di riga e formati social. Esporta un PNG 2x nitido o un SVG. Gratis, nel tuo browser.
Generatore di Immagini da Codice
Un'immagine di codice è una foto di uno snippet con colori di sintassi, margini e uno sfondo, pensata per slide, post e documentazione dove non sono disponibili veri blocchi di codice. Incolla il codice qui sotto, scegli un linguaggio, un tema e uno sfondo, seleziona un formato come 1200 per 675 e scarica un PNG nitido o un SVG.
Formati predefiniti
Formato
Pixel
Ideale per
Auto
Si adatta al codice
Documentazione, slide, file README
Orizzontale 16:9
1200 per 675
Anteprime dei link e post larghi nel feed
Quadrato
1080 per 1080
Post quadrati nel feed
Verticale 4:5
1080 per 1350
Post alti nel feed
Incolla o digita il codice e l'anteprima si aggiorna mentre scrivi. Il linguaggio viene rilevato automaticamente, oppure scegline uno tra nove. I file PNG vengono esportati al doppio della dimensione per avere testo nitido sugli schermi ad alta densità.
Incolla il codice nell'editor. Il linguaggio viene dedotto dal contenuto; cambialo se la deduzione è sbagliata.
Scegli un tema, uno sfondo e un formato. Attiva o disattiva la barra della finestra e i numeri di riga, e imposta margini e dimensione del font.
Aggiungi un nome file da mostrare nella barra della finestra se aiuta chi legge.
Scarica un PNG (renderizzato a 2x) o un SVG che mantiene il codice come testo reale e selezionabile.
Mantieni gli snippet brevi. Da dieci a venti righe si leggono bene in un post; il codice più lungo va in un gist o in un blocco di codice che le persone possono copiare.
Usa una dimensione del font di 16 o più per i post social, che spesso vengono visti sul telefono.
Quando condividi un'immagine di codice, condividi anche il codice come testo o con un link. Gli screen reader non possono leggere l'immagine e nessuno può copiarne il contenuto.
Scegli un tema chiaro per le slide proiettate in sale luminose e uno scuro per schermi e feed social.
Domande frequenti
Il mio codice viene caricato da qualche parte?
No. L'evidenziazione e l'esportazione dell'immagine avvengono nel tuo browser. Nulla viene inviato a un server, quindi è sicuro anche per codice privato.
Perché il PNG è il doppio della dimensione che ho scelto?
Viene esportato a densità di pixel 2x così il testo resta nitido sugli schermi ad alta risoluzione di telefoni e laptop. Quando viene mostrato alla dimensione scelta, ogni pixel CSS ha dietro quattro pixel dell'immagine.
A cosa serve l'esportazione SVG?
L'SVG mantiene il codice come testo dentro un'immagine vettoriale, quindi si adatta a qualsiasi dimensione e in alcuni visualizzatori il testo resta selezionabile. Usa il font monospace del visualizzatore, quindi su un altro computer può apparire leggermente diverso dal PNG.
Quanto è precisa l'evidenziazione della sintassi?
È un tokenizer leggero che colora parole chiave, stringhe, numeri, commenti, funzioni, tag e attributi. Copre ciò che rende leggibile uno snippet in un'immagine. Non è un parser completo, quindi una sintassi insolita può essere colorata come testo semplice.
Creare immagini di codice che le persone leggono
Ritaglia la parte che conta. Togli import e codice boilerplate a meno che non siano il punto, e usa un commento per segnare la riga che vuoi far guardare.
Il contrasto conta in un'immagine quanto in una pagina. I temi qui mantengono i commenti leggibili ma più discreti del codice, e tengono stringhe e parole chiave ben distinte.
Testo alternativo per le immagini di codice
Quando pubblichi l'immagine, descrivi cosa fa il codice nel testo alternativo, per esempio: funzione JavaScript che applica un debounce di 300 millisecondi a un campo di ricerca. Incolla il codice stesso nel corpo del post o in una risposta, se la piattaforma lo consente.
Mezzanotte
Brace
Foresta
Notte viola
Carta
Sabbia
Cielo
Tramonto
Menta
Ardesia
Pesca
Nessuno
Auto
1200 per 675
1080 per 1080
1080 per 1350
Crea un'immagine
Codice
Linguaggio
Rileva ({lang})
Formato
Margine: {n}px
Dimensione font: {n}px
Nome file
Barra della finestra
Numeri di riga
Tema
Sfondo
Anteprima dell'immagine del codice {lang}
{w} per {h} px (il PNG viene esportato a {w2} per {h2})