Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 21
У меня периодически возникала необходимость красиво показать кусочек кода
Прям показать? )) Не поделитесь парочкой ситуаций когда это вообще нужно? Просто мне лично ровно одна причина на ум приходит, чтобы код пихать в картинку. Это когда картинка для какой-то статьи по программированию и нужна картинка. В остальных случаях логично сделать так, чтобы код, который показываешь, можно было скопировать.
Статьи, презентации. Просто какой-нибудь текст красиво обернуть в картинку.
Искренне не понимаю как для статьи или презентации использовать такие картинки. Часть кода не видна из-за обрезки, часть кода из-за блюра. Если задача стоит показать код и разобрать его, то зачем ухудшать читабельность кода на картинке? Если задача стоит показать просто изображение кода (типа крутой программист программирует), то почему бы не использовать стоковые картинки или сгенерировать через ИИ?
Сам по себе проект интересный, но конкретную пользу выделить сложно.
В статье написано, почему не стоит генерировать через ИИ. К тому же это медленно и не виден результат в процессе. А такая картинка с кодом в качестве КДПВ для статьи про программирование подходит идеально.
Эта, например, отлично подойдёт для статьи о C# для начинающих в качестве иллюстрации:
Hello, world
А вот готовая иллюстрация к статье со стихами:
Ахматова
Подготовка таких картинок очень нужна, когда делаешь презентации с большим количеством кода.
Я пользовался сервисом https://carbon.now.sh/, но у него мало языков и мало настроек. Кроме того, у такого сервиса есть один существенный недостаток - это веб-приложение, очень трудоемко выходит: настрой, загрузи код, задай название картинки, скачай.
В итоге пришел к использованию https://pygments.org/docs/cmdline/
Но у pygmentize тоже есть недостатки.
Итого, для подготовки картинок кода у меня такие пожелания:
работа из командной строки
большоей количество подсветок синтаксиса (и несложное добавление новых)
возможность добавления нумерации строк (с настройками внешнего вида)
задание начала нумерации
задание нумерации диапазонами, т.е. что-то вроде
(- - - 1 2 3 . . . 50 51 52), где "-" - пропуск/пробел, а "." - точка, показывающая пропуск кода)поддержка разной стилистики для разных диапазонов
выделение строк (с настройками внешнего вида)
указание ширины (в символах) кода (важно для единообразия в рамках презентации)
поддержка разных выходных форматов (png обычно хватает, но иногда надо и другие форматы)
Настраиваемый перенос кода длинного кода (иногда по логике презентации можно многоточие поставить вместо свертки)
возможность задания "окна" редактора (в том числе и убрать совсем)
работа с профилями настроек (разная стилистика для разных презентаций)
Поэтому работу автора очень приветствую, буду наблюдать за вашим проектом.
Дополню пожелания (подсмотрел в проекте):
скругление углов картинки (для форматов с прозрачностью)
размеры отступов от кода до края картинки
выделение блока текста линейным выделением
прозрачность картинки
трапецоид, 3Д трансформации, градиенты, фильтры мне не нужны, но я понимаю, где они могут использоваться, поэтому тоже неплохо, чтобы были и они тоже должны настраиваться из командной строки (профиля)
настраиваемый водный знак
Требования к такому проекту можно разделить на две группы:
работа с кодом
работа с дизайном
Мне гораздо важнее работа с кодом. Работу с дизайном тоже нужна, и если делать, то делать единообразно (через скрипты, в т.ч.)
Выглядит хорошо, но было бы неплохо в виде Extension для VS Code или консольной утилиты
Это сильно ограничивает использование. А сайт работает везде. К тому же это лежит на GitHub и не требует вообще никаких лишних телодвижений для публикации.
А вот сделать команду для curl, думаю, можно, чтобы в ответе получать готовую картинку. Просто отправляете все параметры прямо в адресной строке.
Очень классная задумка, напоминает старые посты с каруселями и кусками кода. Касательно того красивого эффекта выше, может это даст какие то мысли для добавления фитчей. В стилях у нас есть фишки с использованием текстур. Например в систему можно добавить различные текстуры бумаги (чб текстуры для фотшопа если гуглить), а так же добавить наложение сверху на весь слайд текстуры света и настройки самого цвета, за счет эффектов наложения в CSS. Можно достичь еще более вау-эффектов. Единственное это в большинстве случаев получатся готовые прессеты, которые можно до настроить. Мы часто используем такие фишки у себя в около-игровых веб проектах :)
Это всё делалось и без всякого ЫЫ в Фотошопе за пару минут. Правда, Фотошоп надо знать.
Конечно, красиво, но мало имеет реальных применений. А вот если добавить возможность выбора формата картинки, в также (по вкусу) добавить конвертацию картинки в base64, тогда интересно. И да, главное - чтобы можно было смотреть как под прямым углом - прямо, как на обычный скрин/код, без изысков и размытий.
Забавно, по названию статьи подумал, что внутри будет обсуждение "хватит фоткать экран компа смартфоном", или 10 способов кастомного способа делания скриншотов и их оформления без фотошопа. А внутри оказался интересный материал об эксперименте с созданием стилизованного фото по тексту/коду :)
Чем Вам Adobe After Effects не угодил ?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Красивый скриншот вашего кода