Код у зображення
Перетворіть фрагмент коду на охайну PNG-картку з підсвічуванням синтаксису прямо у вашому браузері — з темою, градієнтним чи прозорим тлом і відступами, без жодного завантаження на сервер.
Код у зображення — Вставте фрагмент, виберіть мову, тему, тло та відступи й експортуйте картку коду в стилі Carbon як прозорий PNG або з градієнтним тлом. Підсвічування синтаксису (Prism) і захоплення зображення (html-to-image) виконуються повністю у вашому браузері, тож ваш код ніколи не завантажується. Попередній перегляд оновлюється наживо, поки ви друкуєте або змінюєте параметри.
Що таке Код у зображення?
Код у зображення — це безкоштовний браузерний інструмент, що перетворює фрагмент коду на зображення для публікації: стилізовану картку коду з підсвічуванням синтаксису, яку можна вставити в допис у блозі, презентацію, README чи пост у соцмережах. Він популярний серед розробників, технічних авторів і викладачів, які хочуть, щоб їхній код мав охайний вигляд, а не плаский знімок екрана. Виберіть підсвічування для JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python чи Bash, а потім оформте картку темою, градієнтним чи суцільним тлом і відступами на ваш смак. Картка відмальовується наживо під час редагування, а одна кнопка «Завантажити PNG» експортує її у роздільності 2x.
Як користуватися Код у зображення
- Вставте або введіть код у редакторі чи підключіть текстовий вихід іншого інструмента до вхідного порту в робочій області.
- Виберіть відповідну мову — JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python чи Bash — щоб підсвічування синтаксису було правильним.
- Відкрийте «Налаштування», щоб вибрати тему (Midnight, Graphite чи Snow), тло (Aurora, Sunset, Ocean, Slate чи Прозоре) та відступи (Щільні, Звичайні чи Просторі).
- Спостерігайте, як живий перегляд оновлюється, поки ви друкуєте та змінюєте параметри; натисніть на нього, щоб збільшити в режимі масштабування.
- Натисніть «Завантажити PNG», щоб зберегти картку як зображення високої роздільності, або в робочій області передайте PNG напряму наступному інструменту обробки зображень.
Приклади
Функція JavaScript для допису в блозі
Вставте коротку функцію JavaScript, залиште мову JavaScript, виберіть тему Midnight з градієнтним тлом Aurora і завантажте чіткий PNG, щоб вставити його у статтю замість плаского знімка екрана.
Прозорий фрагмент CSS для слайдів
Перемкніть мову на CSS, а тло на Прозоре, щоб експортований PNG не мав тла, і картка коду охайно лежала на кольоровому тлі слайда.
Картка команди Bash для README
Виберіть Bash, світлу тему Snow із суцільним тлом Slate та просторими відступами й експортуйте чисту, читабельну картку команди для документації вашого проєкту.
Поширені запитання
- Які мови він може підсвічувати?
- Він підсвічує JavaScript, TypeScript, JSX, CSS, HTML, JSON, Python і Bash. Виберіть ту, що відповідає вашому фрагменту, з випадного списку мов; якщо токен не вдається класифікувати, він просто повертається до базового кольору тексту.
- У якому форматі зображення він експортує?
- Він експортує PNG з подвійною щільністю пікселів (2x) для чітких результатів. Якщо вибрати варіант тла Прозоре, PNG зберігає альфа-канал без жодного тла за карткою коду.
- Чи можу я змінити вигляд картки?
- Так. У «Налаштуваннях» можна перемикатися між темами Midnight, Graphite і Snow, вибирати тло Aurora, Sunset, Ocean, Slate чи Прозоре та задавати відступи Щільні, Звичайні чи Просторі навколо коду.
- Чи завантажується мій код кудись?
- Ні. І підсвічування синтаксису (Prism), і захоплення зображення (html-to-image) виконуються на 100% на боці клієнта, у вашому браузері. Ваш код ніколи не завантажується, не надсилається на наші сервери й не передається, тож навіть закриті фрагменти залишаються на вашому пристрої.
- Чому зображення зʼявляється лише після натискання «Завантажити» на сторінці інструмента?
- На окремій сторінці PNG формується при натисканні «Завантажити PNG», тож набір тексту не перезахоплює зображення за кожним натисканням клавіші. Стилізований перегляд при цьому оновлюється наживо під час редагування; у робочій області PNG також автоматично перебудовується, щоб передаватися наступному інструменту.
Схожі інструменти
Перевірка контрастності кольорів
Перевірте коефіцієнт контрастності WCAG між HEX-кольором тексту й фону та дізнайтеся, чи проходить він AA і AAA для звичайного й великого тексту.
Змішувач кольорів
Змішуйте два HEX-кольори у вибраній пропорції в колірному просторі RGB або Lab і зчитуйте отриманий проміжний колір як зразок і копійоване HEX-значення.
Генератор відтінків кольору
Перетворіть один базовий колір HEX на шкалу відтінків 50-950 у стилі Tailwind, змішуючи його з білим і чорним; кожен щабель з-зразком і копійованим HEX.
Симулятор дальтонізму
Завантажте зображення й перегляньте, як воно виглядає за протанопії, дейтеранопії, тританопії чи повної колірної сліпоти, а потім завантажте змодельований результат.