oLoveTools
Студия скриншотов кода

CodeCard

Превращайте ваши фрагменты кода в красивые изображения, готовые для публикации, на 100% локально в браузере.

48 языковРаботает в браузереБез аккаунта и загрузок

6 строк · Перетащите сюда файл с кодом или вставьте код.

Или нажимайте номера строк в предпросмотре. Shift+клик — диапазон, Alt+клик — инверсия, правый клик — сброс.

Живой предпросмотр

100%
fetch-user.ts
// Pega aquí tu fragmento de código
export async function fetchUser(id: string) {
const res = await fetch(`/api/users/${id}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
}
Подсветка выполняется в браузере. Ваш код не покидает это устройство.
ПродолжитьИзображение едет с вами — без повторной загрузки

Как это работает

1

Вставьте или перетащите код

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

2

Оформите и выберите ключевые строки

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

3

Экспортируйте или отправьте дальше

PNG, JPEG, WebP или векторный SVG, до 4x. Скопируйте в буфер обмена или передайте картинку в CompressSnap, CropSnap либо WatermarkSnap без скачивания.

Настоящая подсветка, 48 языков

Подсветка читает сырой поток токенов Prism, поэтому JavaScript, Rust, Zig, Terraform, Dockerfile и еще 43 языка получают верные цвета — и скачивается только выбранная грамматика.

Выделяйте важные строки

Нажмите номер строки, чтобы выделить ее и приглушить остальные. Shift+клик берет диапазон, Alt+клик инвертирует весь выбор, правый клик сбрасывает.

Экспорт, из которого ничего не обрезано

Перед съемкой карточка измеряется по полной ширине, поэтому длинные строки переживают экспорт, а не обрываются на краю предпросмотра. PNG, JPEG, WebP или векторный SVG, до 4x.

Локально — и действительно офлайн

Шрифты и грамматики отдает этот сайт, а не сторонний CDN. После загрузки страницы подсветка и экспорт работают без сети.

Часто задаваемые вопросы

Почему в других инструментах длинные строки обрезались?+

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

Как выделить конкретные строки?+

Нажмите номер строки в предпросмотре, чтобы выделить ее и приглушить остальные. Shift+клик расширяет диапазон, Alt+клик инвертирует весь выбор, правый клик сбрасывает. Можно и вписать диапазоны вида 3, 7-9, 12.

Какие языки поддерживаются?+

48, включая JavaScript, TypeScript, JSX/TSX, Python, Rust, Go, Zig, C, C++, C#, Java, Kotlin, Swift, Ruby, PHP, SQL, YAML, TOML, Terraform, Dockerfile, Bash, PowerShell, Markdown и unified diff. Скачивается только грамматика выбранного языка.

Можно ли пользоваться CodeCard офлайн?+

Да. Моноширинные шрифты и грамматики отдает сам сайт, а не сторонний CDN, так что после загрузки страницы подсветка и экспорт работают вообще без сети.

Мой код в безопасности?+

Ваш код никуда не передается. Подсветка, верстка и отрисовка изображения происходят в браузере; ничего не загружается и не логируется.

Какие настройки дают самый четкий экспорт?+

PNG в 3x или 4x для растровых задач. Если приемник понимает вектор, берите SVG: он четкий в любом размере и обычно легче, чем PNG 4x.

Создавайте потрясающие изображения скриншотов кода онлайн

Публикация обычного текста кода в социальных сетях может выглядеть скучно. CodeCard мгновенно превращает ваш исходный код в стильные карточки. Вы можете настроить отступы, тени, шрифты и рамки окон в соответствии с вашим стилем.

  • PNG, JPEG, WebP и векторный SVG до 4x
  • Шрифты и грамматики на своем хостинге — работает офлайн
  • Без аккаунта, водяной знак по умолчанию выключен

Быстрая и безопасная генерация на устройстве

CodeCard работает полностью в вашем браузере на основе клиентского рендеринга. Ни один текстовый фрагмент не покидает ваш компьютер.

Идеально для соцсетей, блогов и презентаций

Отлично подходит для IT-блогеров в Twitter/X, разработчиков, пишущих статьи, и преподавателей, готовящих слайды. Красивый визуал удваивает вовлеченность аудитории.

Полная безопасность данных

В отличие от сторонних сервисов, отправляющих ваш код на серверные API, CodeCard выполняет всю подсветку синтаксиса локально в вашем браузере. Ваши пароли, конфигурации и интеллектуальная собственность в безопасности.

На основе потока токенов Prism

Вместо готового HTML от подсветки CodeCard читает сырой поток токенов и собирает код построчно. Именно это дает точные номера строк, выделение по строкам, перенос с висячим отступом и экспорт без обрезки.

Ключевые слова для поиска

код в картинкукрасивые скриншоты кодагенератор карточек кодаальтернатива carbon codeсохранить код как изображениекартинка с кодом для соцсетей

Следующий шаг

Сожмите изображение CompressSnap Добавьте водяной знак WatermarkSnap Отформатируйте код FormatFlow

CodeCard | Генератор красивых скриншотов и изображений исходного кода

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

Часто задаваемые вопросы

Почему в других инструментах длинные строки обрезались?

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

Как выделить конкретные строки?

Нажмите номер строки в предпросмотре, чтобы выделить ее и приглушить остальные. Shift+клик расширяет диапазон, Alt+клик инвертирует весь выбор, правый клик сбрасывает. Можно и вписать диапазоны вида 3, 7-9, 12.

Какие языки поддерживаются?

48, включая JavaScript, TypeScript, JSX/TSX, Python, Rust, Go, Zig, C, C++, C#, Java, Kotlin, Swift, Ruby, PHP, SQL, YAML, TOML, Terraform, Dockerfile, Bash, PowerShell, Markdown и unified diff. Скачивается только грамматика выбранного языка.

Можно ли пользоваться CodeCard офлайн?

Да. Моноширинные шрифты и грамматики отдает сам сайт, а не сторонний CDN, так что после загрузки страницы подсветка и экспорт работают вообще без сети.

Мой код в безопасности?

Ваш код никуда не передается. Подсветка, верстка и отрисовка изображения происходят в браузере; ничего не загружается и не логируется.

Какие настройки дают самый четкий экспорт?

PNG в 3x или 4x для растровых задач. Если приемник понимает вектор, берите SVG: он четкий в любом размере и обычно легче, чем PNG 4x.

Ключевые слова для поиска

код в картинку, красивые скриншоты кода, генератор карточек кода, альтернатива carbon code, сохранить код как изображение, картинка с кодом для соцсетей