Код у зображення
Інструкції
Як старший фронтенд-розробник, вам потрібно конвертувати всі фрагменти коду в контенті на виділені зображення. Вкрай важливо витягти всі фрагменти коду! Зверніть увагу, що код, суворо обмежений синтаксисом зворотних лапок (``) 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. Називайте зображення послідовно, використовуючи цифри.
Опис
Чому нам подобається ця навичка
Цей навик перетворює код на красиві виділені зображення, імітує інтерфейс терміналу та підтримує завантаження у високій якості, що робить його ідеальним інструментом для розробників, які діляться фрагментами коду.
Перетворюйте весь код у статті на зображення та завантажуйте одним натисканням
Схожі навички
Переглянути всі
ЗображенняМасова ілюстрація статей 2.0
Це інтелектуальний інструмент для візуального покращення контенту, створений спеціально для контент-мейкерів. Він глибоко розуміє структуру вашого тексту та автоматично створює високоякісні супровідні ілюстрації для ключових абзаців статті. Незалежно від того, де зберігається ваш контент — в особистій базі знань чи у зовнішніх довгих статтях, — інструмент точно визначає основні концепції та перетворює абстрактний текст у наочну візуальну мову, що значно покращує читабельність і поширюваність матеріалу. Інструмент пропонує три унікальні візуальні стилі для різних творчих сценаріїв: легкий і живий мінімалістичний скетчинг підходить для есе та науково-популярних матеріалів; суворий професійний стиль архітектурних креслень — ідеальний вибір для технічної документації та дослідницьких звітів; а сучасний плоский ілюстративний стиль чудово відповідає естетичним потребам медіа-блогів і нотаток. Для довгих матеріалів інструмент також розумно пропонує схему ілюстрацій, забезпечуючи раціональний розподіл візуальних елементів і акцентування на головному. Під час процесу генерації ви можете гнучко вибирати спосіб отримання зображень. Ви можете попросити інтегрувати згенеровані ілюстрації безпосередньо у наявні абзаци документа для автоматичного форматування, або ж отримати окремий пакет зображень для ручного розповсюдження. Така повна співпраця — від аналізу контенту до візуальної генерації — робить ваші тексти виразнішими, а складні ідеї — зрозумілими з першого погляду.
ЗображенняКомікси для програмістів
Одну технічну тему — і ви отримаєте одразу кілька програмістських коміксів, готових до публікації. Просто вкажіть «тему, кількість коміксів і кількість панелей у кожному» — і ви отримаєте окремі історії: з різними помилками, абсурдними метафорами та несподіваними поворотами. Це не колажі й не повторюваний контент із заміненими заголовками. Підтримуються комікси на 3, 4, 6 або 8 панелей; за замовчуванням у всіх випусках зберігається один головний герой, але для кожного коміксу можна обрати нового персонажа. Не потрібно завантажувати код або внутрішні скриншоти — достатньо залишити одне знеособлене речення про робочий момент.
Довгі тексти у щомісячник
Перетворює тексти на повноцінні китайські інформаційні статті з ілюстраціями. Створює глибокі статті, аналізує структуру та вставляє діаграми в стилі Excalidraw: архітектурні, порівняльні та блок-схеми. В результаті виходить готовий до публікації документ з текстом та графікою.
Код у зображення
Інструкції
Як старший фронтенд-розробник, вам потрібно конвертувати всі фрагменти коду в контенті на виділені зображення. Вкрай важливо витягти всі фрагменти коду! Зверніть увагу, що код, суворо обмежений синтаксисом зворотних лапок (``) 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. Називайте зображення послідовно, використовуючи цифри.
Опис
Чому нам подобається ця навичка
Цей навик перетворює код на красиві виділені зображення, імітує інтерфейс терміналу та підтримує завантаження у високій якості, що робить його ідеальним інструментом для розробників, які діляться фрагментами коду.
Перетворюйте весь код у статті на зображення та завантажуйте одним натисканням
Схожі навички
Переглянути всіЗображенняМасова ілюстрація статей 2.0
Це інтелектуальний інструмент для візуального покращення контенту, створений спеціально для контент-мейкерів. Він глибоко розуміє структуру вашого тексту та автоматично створює високоякісні супровідні ілюстрації для ключових абзаців статті. Незалежно від того, де зберігається ваш контент — в особистій базі знань чи у зовнішніх довгих статтях, — інструмент точно визначає основні концепції та перетворює абстрактний текст у наочну візуальну мову, що значно покращує читабельність і поширюваність матеріалу. Інструмент пропонує три унікальні візуальні стилі для різних творчих сценаріїв: легкий і живий мінімалістичний скетчинг підходить для есе та науково-популярних матеріалів; суворий професійний стиль архітектурних креслень — ідеальний вибір для технічної документації та дослідницьких звітів; а сучасний плоский ілюстративний стиль чудово відповідає естетичним потребам медіа-блогів і нотаток. Для довгих матеріалів інструмент також розумно пропонує схему ілюстрацій, забезпечуючи раціональний розподіл візуальних елементів і акцентування на головному. Під час процесу генерації ви можете гнучко вибирати спосіб отримання зображень. Ви можете попросити інтегрувати згенеровані ілюстрації безпосередньо у наявні абзаци документа для автоматичного форматування, або ж отримати окремий пакет зображень для ручного розповсюдження. Така повна співпраця — від аналізу контенту до візуальної генерації — робить ваші тексти виразнішими, а складні ідеї — зрозумілими з першого погляду.
ЗображенняКомікси для програмістів
Одну технічну тему — і ви отримаєте одразу кілька програмістських коміксів, готових до публікації. Просто вкажіть «тему, кількість коміксів і кількість панелей у кожному» — і ви отримаєте окремі історії: з різними помилками, абсурдними метафорами та несподіваними поворотами. Це не колажі й не повторюваний контент із заміненими заголовками. Підтримуються комікси на 3, 4, 6 або 8 панелей; за замовчуванням у всіх випусках зберігається один головний герой, але для кожного коміксу можна обрати нового персонажа. Не потрібно завантажувати код або внутрішні скриншоти — достатньо залишити одне знеособлене речення про робочий момент.
Довгі тексти у щомісячник
Перетворює тексти на повноцінні китайські інформаційні статті з ілюстраціями. Створює глибокі статті, аналізує структуру та вставляє діаграми в стилі Excalidraw: архітектурні, порівняльні та блок-схеми. В результаті виходить готовий до публікації документ з текстом та графікою.
Знайдіть свою наступну улюблену навичку
Досліджуйте більше підібраних AI-навичок для досліджень, творчості та повсякденної роботи.