Codice in immagine
Trasforma uno snippet di codice in un'immagine con evidenziazione della sintassi nel tuo browser, con oltre 20 linguaggi, temi e sfondi personalizzati, numeri di riga ed esportazione PNG o SVG.
Codice in immagine — Incolla uno snippet, scegli il linguaggio (o lascia che il rilevamento automatico lo indovini) e dai stile a una scheda di codice in stile Carbon con un tema, uno sfondo a gradiente, tinta unita, personalizzato o trasparente, un font monospazio regolabile, i numeri di riga e un titolo della finestra modificabile. Esportala come PNG in scala 1x–3x o come SVG, oppure copia l'immagine direttamente negli appunti. L'evidenziazione della sintassi (Prism) e la cattura dell'immagine (html-to-image) vengono eseguite interamente nel tuo browser, quindi il tuo codice non viene mai caricato.
Cos'è Codice in immagine?
Codice in immagine è uno strumento gratuito, basato sul browser, che trasforma uno snippet di codice in un'immagine condivisibile — una scheda di codice curata con evidenziazione della sintassi per un articolo di blog, una presentazione, un README o un post sui social. Evidenzia oltre 20 linguaggi, tra cui JavaScript, TypeScript, Python, Go, Rust, Java, SQL e altri, con un rilevamento automatico opzionale che indovina il linguaggio dal tuo codice. Vesti la scheda con uno dei sette temi, un gradiente predefinito, un colore o gradiente personalizzato, o uno sfondo trasparente, poi regola con precisione il font monospazio, la dimensione del testo, la spaziatura interna, i numeri di riga, il titolo della finestra e la larghezza di output. La scheda viene renderizzata in tempo reale mentre modifichi e puoi esportarla come PNG a 1x, 2x o 3x, salvarla come SVG o copiarla negli appunti.
Come usare Codice in immagine
- Incolla o digita il tuo codice, oppure collega l'uscita di testo di un altro strumento alla porta di ingresso nello spazio di lavoro.
- Scegli il linguaggio corrispondente o attiva il Rilevamento automatico nelle Impostazioni per farlo indovinare dal tuo codice.
- Scegli un tema e uno sfondo — un gradiente predefinito, una tinta unita o un gradiente personalizzato, o trasparente — nelle Impostazioni.
- Regola a piacere il font monospazio, la dimensione del testo, la spaziatura interna, i numeri di riga, il titolo della finestra e la larghezza di output.
- Osserva l'anteprima aggiornarsi in tempo reale mentre modifichi; cliccala per ingrandirla nella vista zoom.
- Esporta la scheda come PNG a 1x–3x, scaricala come SVG o copia l'immagine negli appunti.
Esempi
Uno snippet Go con i numeri di riga
Incolla una funzione Go, attiva il Rilevamento automatico perché il linguaggio venga scelto per te, abilita i numeri di riga, scegli il tema Nord ed esporta un PNG 2x per un tutorial.
Una scheda brandizzata con gradiente personalizzato
Imposta lo sfondo su Gradiente personalizzato, scegli i due colori del tuo brand e un angolo, aggiungi un titolo della finestra come app.tsx e copia l'immagine direttamente negli appunti.
Un SVG scalabile per la documentazione
Scegli il tema chiaro Snow, imposta la larghezza di output e scarica un SVG così la scheda di codice resta nitida a qualsiasi dimensione nella tua documentazione.
Domande frequenti
- Quali linguaggi può evidenziare?
- Oltre 20, tra cui JavaScript, TypeScript, JSX/TSX, HTML, CSS, JSON, Python, Bash, Java, C, C++, C#, Go, Rust, Ruby, PHP, SQL, YAML, Markdown, Kotlin, Swift e GraphQL. Scegline uno dal menu o attiva il Rilevamento automatico per far indovinare il linguaggio dal tuo codice.
- Cosa posso esportare e con quale qualità?
- Esporta un PNG a densità di pixel 1x, 2x o 3x, salva un SVG vettoriale o copia l'immagine direttamente negli appunti. Scegliendo lo sfondo Trasparente, il PNG mantiene un canale alfa senza alcuno sfondo dietro la scheda.
- Posso cambiare l'aspetto della scheda?
- Sì. Passa tra sette temi, scegli un gradiente predefinito, una tinta unita o un gradiente personalizzato, o uno sfondo trasparente, e regola il font monospazio, la dimensione del testo, la spaziatura interna, i numeri di riga, il titolo della finestra modificabile e la larghezza di output.
- Il mio codice viene caricato da qualche parte?
- No. Sia l'evidenziazione della sintassi (Prism) sia la cattura dell'immagine (html-to-image) vengono eseguite al 100% lato client, nel tuo browser. Il tuo codice non viene mai caricato, inviato ai nostri server o condiviso, quindi anche gli snippet proprietari restano sul tuo dispositivo.
- Perché l'immagine non compare finché non clicco su Scarica nella pagina dello strumento?
- Nella pagina autonoma il PNG viene generato quando premi Scarica, Copia immagine o Scarica SVG, così la digitazione non ricattura l'immagine a ogni tasto. L'anteprima con stile si aggiorna comunque in tempo reale; nello spazio di lavoro il PNG si ricostruisce automaticamente per poter fluire allo strumento successivo.
Strumenti correlati
Verificatore di contrasto dei colori
Controlla il contrasto WCAG 2.1 e il punteggio APCA Lc tra testo e sfondo, vedi i badge AA, AAA e 3:1 e applica il colore conforme più vicino.
Miscelatore di colori
Mescola due colori HEX nel rapporto scelto, nello spazio RGB o Lab, e ottieni il colore intermedio come campione e valore HEX copiabile.
Generatore di sfumature di colore
Trasforma un colore HEX di base in una scala OKLCH, HSL o RGB con livelli regolabili, suggerimenti di contrasto WCAG per livello ed esportazione in CSS, Tailwind e JSON.
Simulatore di daltonismo
Carica un'immagine e visualizza l'anteprima di come appare con protanopia, deuteranopia, tritanopia o daltonismo totale, poi scarica il risultato simulato.