Перейти к содержимому
Toolars
Каталог
Сообщить об ошибке

Разработка · утилита · Локально

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

Code to Image Converter

Экспортируйте код с подсветкой в PNG или SVG: шесть языков, светлая и тёмная темы, номера строк, заголовок окна и масштаб 1x или 2x.

Путь задачи / от ввода к результату

Вставьте код

Работает локально · Ничего не загружается на сервер

Как работает Код в изображение, конфиденциальность и похожие инструменты

Путь задачи / от ввода к результату

Как превратить код в изображение для публикации

  1. 01

    Вставьте код

    Введите или вставьте код в поле «Исходный код»: до 65 536 байт UTF-8, не более 200 строк и 240 символов в строке. Счётчик рядом с подписью показывает текущее число байт на фоне лимита, а всё, что выходит за границу, отклоняется с сообщением, которое её называет, — так вы точно знаете, что подрезать.

  2. 02

    Выберите язык и тему

    Выберите JavaScript, TypeScript, HTML, CSS, JSON или Bash в поле «Язык», затем установите «Тема» в «Светлая» или «Тёмная». Цвета синтаксиса берутся из соответствующей грамматики Shiki и темы в стиле GitHub, а «Загрузить пример» заполнит поле коротким примером на выбранном языке, чтобы вы сравнили варианты оформления до того, как вставите свой.

  3. 03

    Оформите рамку

    Задайте цвет «Фон», «Внутренние отступы» от 16 до 96 px и «Размер шрифта» от 12 до 28 px, затем добавьте «Заголовок окна» длиной до 80 символов, при желании включите «Показывать номера строк» и выберите «Масштаб экспорта» 1x или 2x. Высота строки следует за размером шрифта автоматически, так что крупный текст остаётся читаемым без лишней настройки.

  4. 04

    Создайте предпросмотр

    Создание загружает локальный токенизатор, измеряет реальные шрифтовые фрагменты и заголовок окна, затем показывает тот же экранированный SVG, который идёт на экспорт. Код остаётся текстом и не выполняется. Правки убирают старый предпросмотр. Слишком большой или неизмеримый результат отклоняется; широкое изображение можно прокручивать клавиатурой.

  5. 05

    Скачайте SVG или PNG

    Используйте «Скачать SVG» для масштабируемого векторного файла или «Скачать PNG» для растрового изображения, отрисованного через Canvas в выбранном масштабе. Оба файла создаются локально, и если выбранная комбинация превысит безопасный размер экспорта, рабочее пространство скажет об этом вместо записи повреждённого файла.

Факты об инструменте

Обработка
В вашем браузере
Ввод покидает устройство
Никогда
Хранение
Ничего не сохраняется
Цена
Бесплатно

Ваши данные остаются в браузере.

Код в изображение использует проверенный путь локального выполнения и не создаёт скрытую историю ввода и вывода.

Локальное выполнение

Работает внутри текущей вкладки браузера.

Никакой скрытой обработки

Активные данные инструмента никогда не становятся записями документов Toolars.

Аккаунт не требуется

Используйте основной сценарий без создания профиля. Избранное синхронизируется с аккаунтом после входа.

Мгновенный сброс

Закройте вкладку — и рабочие данные исчезнут.

Когда пригодится Код в изображение

Экспортировать две строки кода

Вставьте две строки: const total = 2 + 3; и console.log(total); (40 байт UTF-8). Выберите JavaScript, Тёмная, фон #111827, отступ 64 px, шрифт 16 px, номера строк, заголовок sum.js и 1×. В локальном браузерном тесте 2026-09-24 после создания предпросмотра скачали toolars-code-image.png: 406 × 270 пикселей и 12 784 байт. Изображение показывает код, но не выполняет его.

Сравнить 1×, 2× и SVG

Сохранив код и настройки, выберите 2×, создайте предпросмотр заново и скачайте PNG. Файл от 2026-09-24 имел 812 × 540 пикселей и 31 366 байт. При 1× SVG toolars-code-image.svg занимал 1 647 байт с viewBox 406 × 270. Масштаб меняет пиксели PNG, а не код; размеры и байты зависят от шрифта и браузера. SVG без встроенного шрифта может выглядеть иначе.

Исправить пустой исходник

Очистите Исходный код и создайте предпросмотр. Появится просьба ввести код, обе загрузки будут недоступны. Верните те же две строки и создайте предпросмотр заново: правки удаляют предыдущий результат. Если экспорт превышает 4 096 пикселей по стороне, попробуйте 1× или меньшие отступ и шрифт.

Что на самом деле делает Код в изображение

Функция, которой вы гордитесь, достойна места в заметках о выпуске; хитрый фрагмент кода хорошо иллюстрирует внутреннюю вики; на конференц-слайде нужен стилизованный фрагмент, а не скриншот с обрезанными вкладками. Код в изображение превращает фрагмент в аккуратную рамку с номерами строк и заголовком окна, а экспортированный SVG или PNG сразу встаёт в слайды, документы и чаты без ручной доработки. Так как токенизация и отрисовка происходят в этой вкладке, неопубликованный исходный код никуда не уезжает.

Частые вопросы

Как сделать изображение JavaScript для слайда?
Введите const total = 2 + 3;, выберите JavaScript, светлую тему и 1x. Создайте предпросмотр и скачайте PNG. На изображении будет код, а не результат 5: инструмент не выполняет код. Для большего растра выберите 2x и создайте предпросмотр заново; ширина и высота удвоятся.
Как экспортировать пример JSON в SVG?
Введите {"ok":true}, выберите JSON и создайте предпросмотр. Скачайте SVG для масштабируемой иллюстрации кода или PNG для сохранения текущего вида. После изменения текста создайте предпросмотр заново: старый очищается. Это экспорт изображения, а не результат проверки JSON.
Каковы лимиты ввода?
До 65 536 байт UTF-8 кода, не более 200 строк по 240 символов каждая и заголовок окна длиной не более 80 символов. Сам экспорт ограничен 4 096 пикселями по каждой стороне и 16 777 216 пикселями суммарно; всё, что выходит за эти рамки, отклоняется с конкретным сообщением.
Мой код загружается куда-то или выполняется?
Ни то, ни другое. Токенизатор Shiki загружается внутри этой вкладки только при нажатии «Создать предпросмотр», предпросмотр строится из текстовых токенов, а не из внедрённого HTML, а исходник никуда не отправляется и не сохраняется после очистки рабочего пространства.
Какие языки и темы доступны?
Шесть языков — JavaScript, TypeScript, HTML, CSS, JSON и Bash — каждый токенизируется собственной грамматикой Shiki. Темы «Светлая» и «Тёмная» — палитры в стиле GitHub, а элемент управления цветом «Фон» оформляет рамку вокруг карточки независимо от выбранной темы.
Что меняет «Масштаб экспорта»?
1x использует измеренные размеры изображения. 2x удваивает ширину и высоту, увеличивая число пикселей PNG в четыре раза, но не добавляет деталей кода и не меняет текст. Оба масштаба ограничены лимитами экспорта. При превышении лимита уменьшите масштаб.
Что скачивать — SVG или PNG?
PNG сохраняет отрисованные здесь пиксели. SVG масштабируется; без загруженного шрифта он зависит от системных шрифтов, которые могут отличаться на другом устройстве. Проверенный загруженный шрифт встраивается полностью, но просмотрщик должен поддерживать встроенные шрифты. Для одинакового внешнего вида выберите PNG.
Почему предпросмотр пропал после изменения настройки?
Так задумано: любая правка кода, языка, темы, фона, отступов, размера шрифта, заголовка, номеров строк или масштаба обесценивает старый предпросмотр вместо того, чтобы показывать устаревшую картинку. Нажмите «Создать предпросмотр» ещё раз, чтобы отрисовать обновлённую рамку.
Какие шрифты можно встроить?
TTF/OTF, до 24 MiB. Выберите шрифт, который разрешено встраивать. Поддерживаются статические контурные шрифты без ограничений встраивания; переменные и цветные не поддерживаются. В SVG включается весь шрифт. При отсутствии символов создание останавливается. Файлы не загружаются на сервер. Без выбора используются системные шрифты.

Читайте также

Продолжить: Разработка

Связанные задачи, а не тупик.

Перейдите в другую сфокусированную рабочую область, не возвращаясь к полному каталогу.

Генератор URL-слагов

URL Slug Generator

Превращайте заголовки в чистые слаги с дефисами или подчёркиваниями: диакритика снимается, амперсанды разворачиваются, нелатиница сохраняется.

Создание

Генератор теней React Native

React Native Shadow Generator

Сравнивайте устаревшие тени и boxShadow в React Native, настраивайте вывод для iOS и Android рядом и копируйте код StyleSheet.

Создание

Кодирование / декодирование Base64

Base64 Encoder/Decoder

Кодируйте Unicode-текст в Base64 и обратно с живой валидацией, режимами URL-safe и UTF-8 и кнопкой обмена для круговых проверок.

Конвертация

Кодирование / декодирование HTML

HTML Encoder/Decoder

Экранируйте пять критичных для разметки символов или декодируйте именованные и числовые сущности HTML — локально, в один клик туда-обратно.

Конвертация