Vai al contenuto

Codice a immagine SVG

Converti uno snippet di codice in un'immagine con evidenziazione della sintassi, cornice della finestra e sfondo sfumato.

Ingresso
14
48
Uscita

Codice a immagine SVG

Incolla uno snippet di codice, scegli il suo linguaggio di programmazione e questo strumento lo renderizza come un'immagine con evidenziazione della sintassi all'interno di una finestra arrotondata — esattamente il tipo di screenshot del codice che vorresti condividere in un blog, un tweet, una presentazione o documentazione interna. Parole chiave, stringhe, commenti e numeri sono colorati automaticamente e la finestra riceve una barra del titolo opzionale in stile macOS con puntini colorati affinché il risultato assomigli a un vero editor, non a un semplice dump di testo.

Nove linguaggi di programmazione sono supportati — JavaScript, TypeScript, Python, JSON, HTML, CSS, Bash, SQL e testo semplice — ognuno con le proprie regole di evidenziazione per parole chiave, stringhe e commenti. Scegli un tema di sfondo tra sei opzioni di sfumatura (tramonto, oceano, mezzanotte, foresta, uva o mono) e lo strumento avvolge la finestra in una scheda sfumata corrispondente. Regola la spaziatura intorno alla finestra, attiva l'ombra esterna, imposta il titolo della finestra e attiva o disattiva indipendentemente i numeri di riga o la barra del titolo. La dimensione del carattere ridimensiona l'intera immagine, quindi sia una riga breve che una funzione di cinquanta righe rimangono leggibili.

L'output è un documento SVG autonomo e indipendente dalla risoluzione: nitido a qualsiasi dimensione, facile da inserire direttamente in una pagina o uno strumento di progettazione e abbastanza piccolo da copiare come testo. Il numero di righe, il numero di caratteri e la dimensione finale dell'immagine in pixel si aggiornano in tempo reale sotto l'output mentre digiti o modifichi le opzioni, quindi vedi esattamente quello che stai per copiare o scaricare.

Tutto accade nel tuo browser usando un piccolo evidenziatore integrato — nessun codice viene caricato e nessun servizio esterno di evidenziazione della sintassi vede mai ciò che incolli. Questo lo rende sicuro da usare su funzioni non pubblicate, strumenti interni o qualsiasi altra cosa che preferirei non inviare a un server esterno solo per fare uno screenshot carino.

FAQ

Quali linguaggi di programmazione ottengono l'evidenziazione della sintassi?
JavaScript, TypeScript, Python, JSON, HTML, CSS, Bash e SQL ricevono tutti l'evidenziazione di parole chiave, stringhe, commenti e numeri. Scegli "Testo semplice" per qualsiasi altra cosa — viene renderizzato senza codifica del colore.
Posso cambiare lo sfondo e l'aspetto della finestra?
Sì. Scegli uno dei sei temi di sfumatura, regola la spaziatura intorno alla finestra, attiva l'ombra esterna e attiva o disattiva indipendentemente la barra del titolo con i puntini colorati e i numeri di riga.
Quale formato ha l'immagine e posso ottenere PNG?
L'output è un SVG vettoriale — nitido a qualsiasi dimensione e facile da incorporare direttamente in una pagina. Per ottenere PNG, apri il file .svg scaricato nel tuo browser o in un editor di immagini ed esportalo come PNG; questo strumento non lo rasterizza automaticamente.
C'è un limite a quanto codice posso incollare?
Nessun limite di righe fisso, ma l'immagine generata è limitata a 10 MB. Gli snippet estremamente lunghi che supererebbero questo limite producono un messaggio che ti chiede di accorciare l'input.
Il mio codice viene caricato da qualche parte?
No. L'evidenziazione e il rendering dell'immagine avvengono interamente nel tuo browser utilizzando un piccolo tokenizer integrato — il tuo codice non lascia mai il tuo dispositivo.