Codice in immagine

Trasforma uno snippet di codice in un'elegante immagine PNG con evidenziazione della sintassi nel tuo browser, con tema, sfondo a gradiente o trasparente e spaziatura interna — senza alcun caricamento.

Caricamento strumento…

Codice in immagine — Incolla uno snippet, scegli linguaggio, tema, sfondo e spaziatura interna ed esporta una scheda di codice in stile Carbon come PNG trasparente o con sfondo a gradiente. 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. L'anteprima si aggiorna in tempo reale mentre digiti o cambi le opzioni.

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 che puoi inserire in un articolo di blog, una presentazione, un README o un post sui social. È apprezzato da sviluppatori, redattori tecnici ed educatori che vogliono un codice dall'aspetto curato anziché incollare uno screenshot piatto. Scegli l'evidenziazione per JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python o Bash, poi vesti la scheda con un tema, uno sfondo a gradiente o tinta unita e la spaziatura interna che preferisci. La scheda viene renderizzata in tempo reale mentre modifichi e un unico pulsante Scarica PNG la esporta a risoluzione 2x.

Come usare Codice in immagine

  1. Incolla o digita il tuo codice nell'editor, oppure collega l'uscita di testo di un altro strumento alla porta di ingresso nello spazio di lavoro.
  2. Scegli il linguaggio corrispondente — JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python o Bash — affinché l'evidenziazione della sintassi sia corretta.
  3. Apri le Impostazioni per scegliere un tema (Midnight, Graphite o Snow), uno sfondo (Aurora, Sunset, Ocean, Slate o Trasparente) e la spaziatura interna (Compatta, Normale o Ampia).
  4. Osserva l'anteprima aggiornarsi in tempo reale mentre digiti e cambi le opzioni; cliccala per ingrandirla nella vista zoom.
  5. Premi Scarica PNG per salvare la scheda come immagine ad alta risoluzione oppure, nello spazio di lavoro, invia il PNG direttamente a uno strumento immagine a valle.

Esempi

Una funzione JavaScript per un articolo di blog

Incolla una breve funzione JavaScript, mantieni il linguaggio su JavaScript, scegli il tema Midnight con lo sfondo a gradiente Aurora e scarica un PNG nitido da incorporare in un articolo al posto di uno screenshot piatto.

Uno snippet CSS trasparente per le slide

Imposta il linguaggio su CSS e lo sfondo su Trasparente così il PNG esportato non ha sfondo, lasciando la scheda di codice poggiare in modo pulito su uno sfondo di slide colorato.

Una scheda di comando Bash per un README

Seleziona Bash, scegli il tema chiaro Snow con lo sfondo a tinta unita Slate e spaziatura Ampia ed esporta una scheda di comando pulita e leggibile per la documentazione del tuo progetto.

Domande frequenti

Quali linguaggi può evidenziare?
Evidenzia JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python e Bash. Scegli quello che corrisponde al tuo snippet dal menu a discesa dei linguaggi; se un token non può essere classificato, ripiega semplicemente sul colore di testo base.
In quale formato immagine esporta?
Esporta un PNG a densità di pixel 2x per risultati nitidi. Se scegli l'opzione di sfondo Trasparente, il PNG mantiene un canale alfa senza alcuno sfondo dietro la scheda di codice.
Posso cambiare l'aspetto della scheda?
Sì. Nelle Impostazioni puoi passare tra i temi Midnight, Graphite e Snow, scegliere uno sfondo Aurora, Sunset, Ocean, Slate o Trasparente e impostare una spaziatura interna Compatta, Normale o Ampia attorno al codice.
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 PNG, così la digitazione non ricattura l'immagine a ogni tasto. L'anteprima con stile si aggiorna comunque in tempo reale mentre modifichi; nello spazio di lavoro il PNG si ricostruisce inoltre automaticamente per poter fluire allo strumento successivo.

Strumenti correlati

Verificatore di contrasto dei colori

Controlla il rapporto di contrasto WCAG tra un colore HEX di primo piano e uno di sfondo e verifica se supera AA e AAA per testo normale e grande.

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 di sfumature 50-950 in stile Tailwind, miscelando verso il bianco e il nero, ogni livello con campione e HEX copiabile.

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.