Код в изображение

Превратите фрагмент кода в изображение с подсветкой синтаксиса прямо в браузере — с более чем 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.

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

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