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.