Код в изображение
Превратите фрагмент кода в аккуратную 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.
Симулятор дальтонизма
Загрузите изображение и посмотрите, как оно выглядит при протанопии, дейтеранопии, тританопии или полной цветовой слепоте, а затем скачайте смоделированный результат.