En tant que développeur front-end senior, vous devez convertir tous les extraits de code du contenu en images surlignées. Il est crucial d'extraire tous les extraits de code ! Notez que le code strictement encadré par les guillemets obliques (``) de Markdown doit être traité comme un seul extrait. Portez une attention particulière au code JSX. Traitez la syntaxe JS comme de la syntaxe JSX pour la coloration syntaxique.

Schéma de couleurs : Le gris foncé est utilisé comme couleur de fond principale, et les blocs de code utilisent un fond sombre avec des surlignages de code colorés (le cyan et le vert vif sont les couleurs d’accentuation principales).

Mise en page : Les blocs de code simulent l’apparence d’un terminal/éditeur de code, mais les boutons en haut de l’éditeur sont supprimés, ne laissant apparaître que le code. Chaque carte possède une marge intérieure de 15 px en haut et en bas, et de 25 px à gauche et à droite.

Implémentation technique : La mise en page et le style sont réalisés en HTML5 et CSS (les blocs de code doivent être colorés) ; la fonction dom-to-image-more est intégrée. L’adresse du script dom-to-image-more est https://youmind.club/__ext/cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js. Ce script permet le téléchargement d’une image par carte (bouton situé sous la carte ; les images doivent être en haute résolution) et le téléchargement de toutes les images en un clic (après avoir cliqué, patientez une seconde avant le téléchargement). Évitez d’ajouter des guillemets obliques inverses (`\`) inutiles au code, car cela peut entraîner des erreurs.

Lors de la mise en œuvre, veuillez noter : la page de couverture doit rester simple. N’utilisez pas de pseudo-éléments pour les icônes ; utilisez directement le format SVG. Les images téléchargées doivent être en haute résolution, avec une échelle de 2. Nommez les images de manière séquentielle à l’aide de numéros.