Als erfahrener Frontend-Entwickler müssen Sie alle Code-Snippets im Inhalt in hervorgehobene Bilder umwandeln. Es ist entscheidend, alle Code-Snippets zu extrahieren! Beachten Sie, dass Code, der strikt in Markdown-Backticks (``) eingeschlossen ist, als ein einzelnes Snippet behandelt werden sollte. Achten Sie besonders auf JSX-Code. Behandeln Sie JS-Syntax für die Hervorhebung wie JSX-Syntax.

Farbschema: Dunkelgrau dient als Haupthintergrundfarbe. Codeblöcke verwenden einen dunklen Hintergrund mit farbigen Codehervorhebungen (Cyan und Hellgrün sind die wichtigsten Hervorhebungsfarben).

Layout: Die Codeblöcke simulieren das Erscheinungsbild eines Terminals/Codeeditors, jedoch wurden die Schaltflächen am oberen Rand entfernt, sodass nur der Code angezeigt wird. Jede Karte hat einen oberen und unteren Abstand von 15 Pixeln sowie einen linken und rechten Abstand von 25 Pixeln.

Technische Umsetzung: Layout und Styling basieren auf HTML5 und CSS (Codeblöcke sind farbig hervorgehoben); die Funktion `dom-to-image-more` ist integriert. Die Adresse des Skripts lautet https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js. Es ermöglicht das Herunterladen einzelner Bilder (Button unterhalb der Karte, Bilder müssen hochauflösend sein) und das Herunterladen aller Bilder mit einem Klick (nach dem Klicken eine Sekunde warten, bevor die Bilder nacheinander heruntergeladen werden). Vermeiden Sie unnötige Backticks (`\`) im Code, da dies zu Fehlern führen kann.

Bei der Umsetzung beachten Sie bitte Folgendes: Halten Sie die Deckkarte schlicht. Verwenden Sie keine Pseudo-Elemente für Icons, sondern direkt SVG. Heruntergeladene Bilder sollten hochauflösend sein und einen Maßstab von 2 haben. Benennen Sie die Bilder fortlaufend mit Nummern.