Когда-то давным-давно один из хабражителей поделился своим прекрасным сервисом по созданию красивых изображений из кода. Но с тех пор много воды утекло и сайт канул в лету. У меня периодически возникала необходимость красиво показать кусочек кода и я находил другие подобные сервисы — но они были слишком ограниченные.
Некоторые из этих сервисов выглядят очень круто, имеются хорошие настройки. Некоторые имеют даже платные. Но ни один не имеет того, что я хотел. И бесплатно.
Недавно к одной из статей я попросил ChatGPT создать мне подобное изображение по следующему запросу:
Возьми код, который написан ниже, и создай изображение, где этот текст будет на тёмном фоне с подсветкой кода, наклонён под углом 40 градусов вверх слева направо. При этом правая часть должна исчезать в глубине, а левая быть так близко к пользователю, что должна быть слегка размазана. Угол глубины - 30 градусов. И наложи на изображение тёплый фильтр, как Рио в Инстаграме.
(ниже был код)
Визуально выглядит круто, хоть и не совсем точно соответствует описанию, но текст кода выглядит очень странно.
Мысли сделать подобный сервис закрались у меня уже очень давно, но тут я понял, что пора. Ранее за это я никак не брался, т.к. от сложного специфического JavaScript я далёк, а работа в JS с изображениями мне вряд ли когда-нибудь ещё понадобится. В общем, просто не хотелось тратить на это кучу времени. Глядя на результат, я теперь понимаю, почему некоторые сервисы берут плату за отдельные фичи
Но вот LLM-ки доросли до приемлемого уровня. Я сначала обратился к ChatGPT и после долгих разъяснений получил половинчатый результат, т.к. тот не захотел писать мне 1000 строк кода. Тот, что я получил, не работал, и визуально смотрелся так себе.
Тогда я пошёл за помощью к Claude и на тот же самый запрос он выдал прекрасный результат, который и выглядит хорошо, и сразу же работал. В обоих случаях использовал бесплатную версию.
Ещё пара уточняющих запросов — и сервис был почти готов к продакшену. Но по пути у меня появились новые хотелки, так что я разложил файл на три, открыл VS Code, и продолжил использовать Claude через Copilot. Так увлёкся, что даже в какое-то ограничение упёрся.
Сейчас он готов и я сначала покажу результат, наиболее близкий к предыдущему. Конечно, он не совсем такой. Нужно больше тем, больше фильтров, двойное размытие, добавить источник света, что звучит слишком много в придачу ко всем уже имеющимся настройкам.
Но то, что получилось, уже выглядит на мой взгляд довольно круто. С возможностями, которые я не видел нигде ранее. А если присмотритесь, то увидите ещё одно важное дополнение: выделенный текст тоже рендерится и для него можно задать цвет.
Попробовать можно тут: https://mansiper.github.io/CodeShot/
Код проекта: https://github.com/Mansiper/CodeShot
Всё работает прямо в браузере.
Какие возможности реализованы:
Поддерживается не только код, но и обычный текст со стандартными шрифтами
Для кода выбор темы
Для текста выбор цветов фона и шрифта, настройка выравнивания
Размер шрифта и высота строки
Настройки фона
Настройки отступов
Цвет и прозрачность выделенного текста
Приближение
Скруглённые углы
Стиль окна
Номера строк
Настройка тени
Прозрачность окна
Готовые фильтры (подобно фильтрам в Инсте) с заданием интенсивности
Поворот окна
Наклон окна в глубину по вертикали и горизонтали
Сужение каждой из сторон окна
Размытие с выбором направления и интенсивности
Все изменения сохраняются в local storage
Оставляйте ваши пожелания. По ходу дела буду добавлять новые фичи.
Это мой первый завайбкоженный проект. Без LLM я вряд ли бы за него взялся. Код в файлах не для чтения программистами, так что я его и не пытался форматировать.
И покажите в комментариях, что у вас получилось сделать в моём сервисе.
(тут могла быть реклама моего Телеграм-канала)
Комментарии (21)
Ryav
28.03.2026 08:05Выглядит хорошо, но было бы неплохо в виде Extension для VS Code или консольной утилиты
ProgerMan Автор
28.03.2026 08:05Это сильно ограничивает использование. А сайт работает везде. К тому же это лежит на GitHub и не требует вообще никаких лишних телодвижений для публикации.
А вот сделать команду для curl, думаю, можно, чтобы в ответе получать готовую картинку. Просто отправляете все параметры прямо в адресной строке.
DmitrySolomennikov
28.03.2026 08:05Это сильно ограничивает использование.
Сайт не всегда доступен.
Нередко презентация дорабатывается в самолете или поезде, где может не быть связи, поэтому офлайн режим крайне важен.
ProgerMan Автор
28.03.2026 08:05Можно сохранить исходники на этот случай. Только придётся и внешние js тоже загрузить. Зато всегда будет работать.
vasyangton
28.03.2026 08:05Очень классная задумка, напоминает старые посты с каруселями и кусками кода. Касательно того красивого эффекта выше, может это даст какие то мысли для добавления фитчей. В стилях у нас есть фишки с использованием текстур. Например в систему можно добавить различные текстуры бумаги (чб текстуры для фотшопа если гуглить), а так же добавить наложение сверху на весь слайд текстуры света и настройки самого цвета, за счет эффектов наложения в CSS. Можно достичь еще более вау-эффектов. Единственное это в большинстве случаев получатся готовые прессеты, которые можно до настроить. Мы часто используем такие фишки у себя в около-игровых веб проектах :)
ProgerMan Автор
28.03.2026 08:05Про текстуры классная идея! Надо посмотреть, что из этого может получиться.
Beholder
28.03.2026 08:05Это всё делалось и без всякого ЫЫ в Фотошопе за пару минут. Правда, Фотошоп надо знать.
CareDealer
28.03.2026 08:05Тоже не покидает ощущение, что такого рода задачу можно решить и автоматизировать через какой-то action в ФШ х) не будет ограничений ни на стили текста, ни на его количество и тд
ArtyomOchkin
28.03.2026 08:05Конечно, красиво, но мало имеет реальных применений. А вот если добавить возможность выбора формата картинки, в также (по вкусу) добавить конвертацию картинки в base64, тогда интересно. И да, главное - чтобы можно было смотреть как под прямым углом - прямо, как на обычный скрин/код, без изысков и размытий.
Забавно, по названию статьи подумал, что внутри будет обсуждение "хватит фоткать экран компа смартфоном", или 10 способов кастомного способа делания скриншотов и их оформления без фотошопа. А внутри оказался интересный материал об эксперименте с созданием стилизованного фото по тексту/коду :)
DmitrySolomennikov
28.03.2026 08:05Если уж мысль развивать, то тут интереснее что-то вроде GitHub Gist + Mermaid Live Editor, то есть возможность делиться форматированными кусочками кода. Тогда имеет смысл кодировать в Base64. В любом другом случае проще закодировать в командной строке.
Stanislav_Z
28.03.2026 08:05Чем Вам Adobe After Effects не угодил ?
ProgerMan Автор
28.03.2026 08:05Моё решение быстрое, бесплатное, не требует установки и обучения, выполняет конкретную задачу (в некоторых случаях всего в два клика).Более того, у меня никогда и мысли не возникало об установке этого приложения, не говоря уже о подобном использовании.
yarkov
Прям показать? )) Не поделитесь парочкой ситуаций когда это вообще нужно? Просто мне лично ровно одна причина на ум приходит, чтобы код пихать в картинку. Это когда картинка для какой-то статьи по программированию и нужна картинка. В остальных случаях логично сделать так, чтобы код, который показываешь, можно было скопировать.
ProgerMan Автор
Статьи, презентации. Просто какой-нибудь текст красиво обернуть в картинку.
R0uT3r
Искренне не понимаю как для статьи или презентации использовать такие картинки. Часть кода не видна из-за обрезки, часть кода из-за блюра. Если задача стоит показать код и разобрать его, то зачем ухудшать читабельность кода на картинке? Если задача стоит показать просто изображение кода (типа крутой программист программирует), то почему бы не использовать стоковые картинки или сгенерировать через ИИ?
Сам по себе проект интересный, но конкретную пользу выделить сложно.
ProgerMan Автор
В статье написано, почему не стоит генерировать через ИИ. К тому же это медленно и не виден результат в процессе. А такая картинка с кодом в качестве КДПВ для статьи про программирование подходит идеально.
Эта, например, отлично подойдёт для статьи о C# для начинающих в качестве иллюстрации:
Hello, world
А вот готовая иллюстрация к статье со стихами:
Ахматова
DmitrySolomennikov
Подготовка таких картинок очень нужна, когда делаешь презентации с большим количеством кода.
Я пользовался сервисом https://carbon.now.sh/, но у него мало языков и мало настроек. Кроме того, у такого сервиса есть один существенный недостаток - это веб-приложение, очень трудоемко выходит: настрой, загрузи код, задай название картинки, скачай.
В итоге пришел к использованию https://pygments.org/docs/cmdline/
Но у pygmentize тоже есть недостатки.
Итого, для подготовки картинок кода у меня такие пожелания:
работа из командной строки
большоей количество подсветок синтаксиса (и несложное добавление новых)
возможность добавления нумерации строк (с настройками внешнего вида)
задание начала нумерации
задание нумерации диапазонами, т.е. что-то вроде
(- - - 1 2 3 . . . 50 51 52), где "-" - пропуск/пробел, а "." - точка, показывающая пропуск кода)
поддержка разной стилистики для разных диапазонов
выделение строк (с настройками внешнего вида)
указание ширины (в символах) кода (важно для единообразия в рамках презентации)
поддержка разных выходных форматов (png обычно хватает, но иногда надо и другие форматы)
Настраиваемый перенос кода длинного кода (иногда по логике презентации можно многоточие поставить вместо свертки)
возможность задания "окна" редактора (в том числе и убрать совсем)
работа с профилями настроек (разная стилистика для разных презентаций)
Поэтому работу автора очень приветствую, буду наблюдать за вашим проектом.
DmitrySolomennikov
Дополню пожелания (подсмотрел в проекте):
скругление углов картинки (для форматов с прозрачностью)
размеры отступов от кода до края картинки
выделение блока текста линейным выделением
прозрачность картинки
трапецоид, 3Д трансформации, градиенты, фильтры мне не нужны, но я понимаю, где они могут использоваться, поэтому тоже неплохо, чтобы были и они тоже должны настраиваться из командной строки (профиля)
настраиваемый водный знак
Требования к такому проекту можно разделить на две группы:
работа с кодом
работа с дизайном
Мне гораздо важнее работа с кодом. Работу с дизайном тоже нужна, и если делать, то делать единообразно (через скрипты, в т.ч.)