Рассылка о презентациях №20

Привет! Это Бизиков.

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

Сань, а что тут вставлять то?! Спросите вы. Казалось бы, что тут сложного:

Код вставлен. Но есть проблема: он плохо считывается. Код не похож на код. Можно поменять шрифт на моноширинный. Например, на Consolas:

Во, стало лучше. Код уже больше похож на код. Но не совсем. Код в среде разработки обычно имеет цветовую схему: функции, параметры и другие части кода раскрашены в свой цвет. У каждого языка программирования своя цветовая схема. Делается это для удобства чтения кода.

Как вариант, можно раскрасить вручную каждую часть текста в свой цвет. Но это займёт много времени. А что, если таких слайдов в вашем докладе 30 или 50 штук? Ух, жопа.

Когда на слайд надо вставить код в презентацию я использую сервис carbon.now.sh — с его помощью можно сгенерировать красивую картинку с кодом, раскрашенным под нужный язык программирования и потом вставить на слайд.

Как настроить сервис?
Настройки, которые выставлены у сервиса по умолчанию мне не нравятся. Поэтому расскажу как сделать красиво. Проще всего скачать файл настроек и выполнить импорт.

Нажимаем на иконку настроек → Misс → «Import config», выбираем файл и загружаем:

Готово! Вы красавчик (или красавица!).

Если интересно узнать детали, читаем дальше.

Интерфейс сервиса:

4. Настройки, тут самое интересное. 

4.1. Настройки окна: убираем все отступы, тень, задаем фиксированную ширину окна и используем её для всех вставок кода в рамках презентации. Это необходимо сделать, чтобы от слайда к слайду не было скачков в размере кода на картинке. Об этом ещё чуть-чуть в конце расскажу. 

4.2. Настройки редактора: выставляем размер текста на максимум, иначе на слайде он будет мелким. И ещё рекомендую выставить нумерацию строк для удобства считывания кода. 

5. Экспорт, тут всё просто: качаем в ×2 картинку в формате PNG. 

И ещё пара советов

Совет первый. Не экспортируйте в SVG. Сервис не умеет корректно его генерировать. В PowerPoint отображается пустое белое окно, а Keynote вовсе не поддерживает SVG. Поэтому экспортируйте картинку с кодом в PNG.

Совет второй. Чтобы экраны с кодом не скакали по размеру от слайда к слайду, сначала выберите самый большой кусок кода, сгенерируйте картинку и вставьте на слайд. Подгоните по размеру, чтобы смотрелось аккуратно. Всем остальным картинкам задавайте ширину как у этой картинки. Не забудьте поставить галочку рядом с размерами, чтобы высота выставлялась пропорционально ширине.

Итого

В результате получим вот такую картинку с кодом, которую можно будет вставить в слайд презентации:

Поделиться письмом с друзьями и коллегами:

Двадцатый выпуск рассылки написан 3 апреля в электричке по дороге из Кувандыка в Оренбург. Прямо с телефона! До чего технологии дошли... Оформил рассылку 5 апреля уже в Москве.