Codice in immagine

madeBy
冴羽
installedBy
3
categoryLabelimages
fromYouMind
Editor's Pick

Why we love this skill

Questa funzionalità converte il codice in immagini con una formattazione elegante, simula un'interfaccia da terminale e supporta il download in alta definizione, rendendola uno strumento ideale per gli sviluppatori che desiderano condividere frammenti di codice.

Istruzioni

In qualità di sviluppatore front-end senior, devi convertire tutti i frammenti di codice presenti nel contenuto in immagini evidenziate. È fondamentale estrarre tutti i frammenti di codice! Tieni presente che il codice racchiuso tra apici inversi (``) di Markdown deve essere trattato come un singolo frammento. Presta particolare attenzione al codice JSX. Tratta la sintassi JS come sintassi JSX per l'evidenziazione.

Schema di colori: il grigio scuro è utilizzato come colore di sfondo principale, mentre i blocchi di codice hanno uno sfondo scuro con evidenziazioni colorate (il ciano e il verde brillante sono i colori principali per l'enfasi).

Layout: I blocchi di codice simulano l'aspetto di un terminale/editor di codice, ma i pulsanti nella parte superiore dell'editor sono stati rimossi, visualizzando solo il codice. Ogni scheda ha un padding superiore e inferiore di 15px e un padding sinistro e destro di 25px.

Implementazione tecnica: il layout e lo stile sono implementati utilizzando HTML5 e CSS (i blocchi di codice devono essere evidenziati a colori); è integrata la funzione dom-to-image-more. L'indirizzo dello script dom-to-image-more è https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js, che consente il download di singole immagini (pulsante posizionato sotto la scheda, le immagini devono essere ad alta risoluzione) e il download di tutte le immagini con un solo clic (dopo aver cliccato, attendere 1 secondo prima di scaricare le immagini una per una). Evitare di aggiungere backtick (`\`) non necessari al codice, poiché ciò potrebbe causare errori.

Durante l'implementazione, si prega di notare quanto segue: la copertina deve essere semplice. Non utilizzare pseudo-elementi per le icone; utilizzare direttamente file SVG. Le immagini scaricate devono essere ad alta risoluzione, con una scala di 2. Nominare le immagini in sequenza utilizzando i numeri.

Schreiben

description

Converti tutto il codice dell'articolo in immagini e scaricale con un solo clic.

Related Skills

View all
Richiesta di inversione dell'immagine

Richiesta di inversione dell'immagine

Gli utenti forniscono un'immagine e Skill, tramite un processo simile all'ingegneria inversa, estrae con precisione tutte le informazioni visive, come stile, composizione, forma del soggetto, colore e atmosfera, generando un prompt in grado di produrre direttamente un'immagine quasi identica. È incluso anche un breve tutorial per la creazione di opere derivate.

Richiesta di inversione dell'immagine
Nelle parole si trovano dipinti, e nei dipinti si trovano classici.

Nelle parole si trovano dipinti, e nei dipinti si trovano classici.

Inserisci un'espressione idiomatica, seleziona uno dei 20 stili di immagine e genera automaticamente una "Scheda di analisi dell'espressione idiomatica (che include pinyin, significato originale, significato esteso, frase di esempio e scenari applicabili)" e un'"Immagine che corrisponde alla concezione artistica dell'espressione idiomatica". Le due immagini vengono poi combinate e visualizzate orizzontalmente.

Nelle parole si trovano dipinti, e nei dipinti si trovano classici.
Direttore della fotografia per animali domestici | Crea foto cinematografiche per i tuoi animali con un solo clic

Direttore della fotografia per animali domestici | Crea foto cinematografiche per i tuoi animali con un solo clic

Vuoi dipingere un acquerello leggero e arioso per il tuo amico a quattro zampe? Vuoi vedere il tuo Golden Retriever con una tuta spaziale? Vuoi trasformare il tuo gatto soriano arancione in un personaggio di un film Ghibli? Non c'è bisogno di andare in uno studio fotografico o di decifrare complicate istruzioni dell'IA. Questa skill è il tuo "direttore visivo personalizzato per animali domestici", con due fantastiche funzionalità: 1. Trasformazione fotografica (altamente consigliata): carica una foto del tuo animale domestico, scegli uno stile e genererà istantaneamente un'immagine straordinaria che ne conserva i tratti originali! 2. Evocazione tramite testo: non hai una foto? Basta digitare una descrizione (ad esempio, "Un bulldog francese con gli occhiali da sole alla guida di un'auto sportiva") e genererà comunque un'immagine. Traduce automaticamente le istruzioni professionali e genera un'immagine direttamente nella chat. Include 14 stili popolari (tra cui i più recenti stili acquerello dipinto a mano e giapponese dipinto a mano), con la possibilità di cambiarli con un solo clic. Cambiare lo screensaver ogni giorno è semplicissimo!

Direttore della fotografia per animali domestici | Crea foto cinematografiche per i tuoi animali con un solo clic

Find your next favorite skill

Explore more curated AI skills for research, creation, and everyday work.

Explore all skills