Как опытный фронтенд-разработчик, вам необходимо преобразовать все фрагменты кода в контенте в подсвеченные изображения. Крайне важно извлечь все фрагменты кода! Обратите внимание, что код, строго заключенный в обратные кавычки (``) синтаксиса Markdown, следует рассматривать как единый фрагмент. Особое внимание уделите коду JSX. Для подсветки синтаксиса JS используйте синтаксис JSX.

Цветовая схема: в качестве основного цвета фона используется темно-серый, а блоки кода имеют темный фон с цветной подсветкой кода (ключевыми цветами являются голубой и ярко-зеленый).

Макет: Блоки кода имитируют внешний вид терминала/редактора кода, но кнопки в верхней части редактора кода удалены, отображается только сам код. Каждая карточка имеет верхний и нижний отступы по 15 пикселей и левый и правый отступы по 25 пикселей.

Техническая реализация: Макет и стилизация реализованы с использованием HTML5 и CSS (блоки кода должны быть выделены цветом); интегрирована функция dom-to-image-more. Адрес скрипта dom-to-image-more: https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js, обеспечивающий загрузку изображения для одной карточки (кнопка расположена под карточкой, изображения должны быть высокого разрешения) и загрузку всех изображений одним щелчком (после щелчка подождите 1 секунду, прежде чем загружать изображения по одному). Избегайте добавления лишних обратных кавычек (`\`) в код, так как это может вызвать ошибки.

При реализации обратите внимание на следующее: обложка должна быть простой. Не используйте псевдоэлементы для иконок; используйте SVG напрямую. Загруженные изображения должны быть высокого разрешения, масштаб 2. Называйте изображения последовательно, используя цифры.