Як старший фронтенд-розробник, вам потрібно конвертувати всі фрагменти коду в контенті на виділені зображення. Вкрай важливо витягти всі фрагменти коду! Зверніть увагу, що код, суворо обмежений синтаксисом зворотних лапок (``) 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. Називайте зображення послідовно, використовуючи цифри.