Код у зображення

Перетворіть фрагмент коду на зображення з підсвічуванням синтаксису прямо в браузері — з понад 20 мовами, власними темами й тлами, номерами рядків та експортом у PNG або SVG.

Завантаження інструмента…

Код у зображення — Вставте фрагмент, виберіть мову (або довірте це автовизначенню) і оформте картку коду в стилі Carbon з темою; градієнтним, суцільним, власним чи прозорим тлом; налаштовуваним моноширинним шрифтом; номерами рядків і редагованим заголовком вікна. Експортуйте її як PNG у масштабі 1x–3x або як SVG чи скопіюйте зображення прямо в буфер обміну. Підсвічування синтаксису (Prism) і захоплення зображення (html-to-image) виконуються повністю у вашому браузері, тож ваш код ніколи не завантажується.

Що таке Код у зображення?

Код у зображення — це безкоштовний браузерний інструмент, що перетворює фрагмент коду на зображення для публікації: стилізовану картку коду з підсвічуванням синтаксису для допису в блозі, презентації, README чи поста в соцмережах. Він підсвічує понад 20 мов, зокрема JavaScript, TypeScript, Python, Go, Rust, Java, SQL та інші, з необовʼязковим автовизначенням, що вгадує мову за вашим кодом. Оформте картку однією із семи тем, готовим градієнтом, власним кольором чи градієнтом або прозорим тлом, а потім точно налаштуйте моноширинний шрифт, розмір шрифту, відступи, номери рядків, заголовок вікна та ширину виводу. Картка відмальовується наживо під час редагування, і ви можете експортувати її як PNG у 1x, 2x чи 3x, зберегти як SVG або скопіювати в буфер обміну.

Як користуватися Код у зображення

  1. Вставте або введіть код чи підключіть текстовий вихід іншого інструмента до вхідного порту в робочій області.
  2. Виберіть відповідну мову або увімкніть автовизначення в «Налаштуваннях», щоб інструмент угадав її за вашим кодом.
  3. Виберіть тему й тло — готовий градієнт, власний суцільний колір чи градієнт, або прозоре — у «Налаштуваннях».
  4. Точно налаштуйте на свій смак моноширинний шрифт, розмір шрифту, відступи, номери рядків, заголовок вікна та ширину виводу.
  5. Спостерігайте, як живий перегляд оновлюється під час редагування; натисніть на нього, щоб збільшити в режимі масштабування.
  6. Експортуйте картку як PNG у 1x–3x, завантажте її як SVG або скопіюйте зображення в буфер обміну.

Приклади

Фрагмент на Go з номерами рядків

Вставте функцію на Go, увімкніть автовизначення, щоб мову було обрано за вас, увімкніть номери рядків, виберіть тему Nord і експортуйте PNG 2x для навчального матеріалу.

Брендова картка з власним градієнтом

Задайте тло «Власний градієнт», виберіть два фірмові кольори й кут, додайте заголовок вікна на кшталт app.tsx і скопіюйте зображення прямо в буфер обміну.

Масштабований SVG для документації

Виберіть світлу тему Snow, задайте ширину виводу й завантажте SVG, щоб картка коду залишалася чіткою за будь-якого розміру у вашій документації.

Поширені запитання

Які мови він може підсвічувати?
Понад 20, зокрема JavaScript, TypeScript, JSX/TSX, HTML, CSS, JSON, Python, Bash, Java, C, C++, C#, Go, Rust, Ruby, PHP, SQL, YAML, Markdown, Kotlin, Swift і GraphQL. Виберіть одну зі списку або увімкніть автовизначення, щоб мову вгадувало за вашим кодом.
Що можна експортувати і в якій якості?
Експортуйте PNG зі щільністю пікселів 1x, 2x чи 3x, збережіть векторний SVG або скопіюйте зображення прямо в буфер обміну. Якщо вибрати прозоре тло, PNG зберігає альфа-канал без жодного тла за карткою.
Чи можу я змінити вигляд картки?
Так. Перемикайтеся між сімома темами, вибирайте готовий градієнт, власний суцільний колір чи градієнт або прозоре тло та налаштовуйте моноширинний шрифт, розмір шрифту, відступи, номери рядків, редагований заголовок вікна та ширину виводу.
Чи завантажується мій код кудись?
Ні. І підсвічування синтаксису (Prism), і захоплення зображення (html-to-image) виконуються на 100% на боці клієнта, у вашому браузері. Ваш код ніколи не завантажується, не надсилається на наші сервери й не передається, тож навіть закриті фрагменти залишаються на вашому пристрої.
Чому зображення зʼявляється лише після натискання «Завантажити» на сторінці інструмента?
На окремій сторінці PNG формується при натисканні «Завантажити», «Копіювати зображення» чи «Завантажити SVG», тож набір тексту не перезахоплює зображення за кожним натисканням клавіші. Стилізований перегляд при цьому оновлюється наживо; у робочій області PNG також автоматично перебудовується, щоб передаватися наступному інструменту.

Схожі інструменти

Перевірка контрастності кольорів

Перевірте контраст WCAG 2.1 і оцінку APCA Lc між кольором тексту та фону, перегляньте позначки AA, AAA і 3:1 та застосуйте найближчий прохідний колір.

Змішувач кольорів

Змішуйте два HEX-кольори у вибраній пропорції в колірному просторі RGB або Lab і зчитуйте отриманий проміжний колір як зразок і копійоване HEX-значення.

Генератор відтінків кольору

Перетворіть один базовий колір HEX на шкалу OKLCH, HSL або RGB з налаштовними щаблями, підказками контрасту WCAG на кожному щаблі та експортом у CSS, Tailwind і JSON.

Симулятор дальтонізму

Завантажте зображення й перегляньте, як воно виглядає за протанопії, дейтеранопії, тританопії чи повної колірної сліпоти, а потім завантажте змодельований результат.