Как вставить код на слайд презентации
Будет полезно, если вы разработчик и выступаете на конференции или демонстрируете команде на очередном стендапе куски исходного кода.
Сань, а что тут вставлять то?! Спросите вы. Казалось бы, что тут сложного, да? Давайте разберем пример. На слайде ниже вставлен код.
Но есть проблема: он плохо считывается. Код не похож на код. Можно поменять шрифт на моноширинный. Например, на Consolas:
Код уже больше похож на код, но не совсем. Код в среде разработки обычно имеет цветовую схему: функции, параметры и другие его части раскрашены в свой цвет. У каждого языка программирования своя цветовая схема. Делается это для удобства чтения кода.
Например, вот так этот код выглядит в Visual Studio Code:
Как вариант, можно взять скриншот c кодом из Visual Studio Code и вставить его на слайд презентации — будет лучше, чем просто текст:
Но в этом случае у нас на экране много лишних деталей, которые могут отвлекать: левая панель, хлебные крошки, строка данных снизу, панель справа и в целом куча лишних иконок. Если в презентацию необходимо вставить код, то я использую сервис carbon.now.sh.
С помощью carbon.now.sh можно сгенерировать красивую картинку с кодом, раскрашенным под нужный язык программирования и после вставить на слайд. Вот, как это будет выглядеть:
Для наглядности давайте теперь сравним все три варианта: 1) код, вставленный текстом; 2) скриншот кода из среды разработки; 3) картинка с кодом, сгенерированная через carbon.now.sh:
Первый вариант ужасен. Два остальных ничего так, но в третьем случае у нас код крупнее, его легче рассмотреть и никакие элементы интерфейса нас не отвлекают. В целом, можно использовать второй или третий варианты. Если решили использовать carbon.now.sh, то ниже расскажу про настройки.
Настройки carbon.now.sh
Кратко пройдёмся по интерфейсу сервиса, чтобы вы понимали как выбрать свой стиль, нужный язык программирования и скачать получившееся изображение:
1. Тема оформления. Предпочитаю Material. Вы можете поиграться и выбрать ту тему, которая вам понравится.
2. Язык программирования. Указываем тот язык, на котором написан код.
3. Фон. Рекомендую указать прозрачный. В этом случае вы сможете менять фон на самом слайде и не придется заново генерировать картинку с фоном, чтобы тот соответствовал фону слайда. Чтобы сделать фон прозрачным необходимо ползунок прозрачности передвинуть влево.
4. Настройки окна. Убираем все отступы, тень, задаем фиксированную ширину окна и используем её для всех вставок кода в рамках презентации. Это необходимо сделать, чтобы от слайда к слайду не было скачков в размере кода на картинке. Если у вас планируется много экранов с кодом, то чтобы они не скакали по размеру от слайда к слайду — сначала выберите самый большой кусок кода, сгенерируйте картинку и вставьте на слайд. Подгоните по размеру, чтобы смотрелось аккуратно. Всем остальным картинкам задавайте ширину как у этой картинки.
5. Экспорт. Всё просто: качаем в ×2 картинку в формате PNG. Не экспортируйте в SVG. Сервис не умеет корректно его генерировать. В PowerPoint отображается пустое белое окно, а Keynote вовсе не поддерживает SVG.