Иногда мне нужно показать код на слайдах. Это может быть внутренняя презентация для 3–5 разработчиков, онлайн-митап или живое мероприятие. И много раз я пытался восстановить потерянную конфигурацию стиля кода или воссоздать цветовую палитру из предыдущей презентации.

Я решил сохранить все шаблоны и поделиться ими с вами, а также некоторыми советами по коду в слайдах. Я надеюсь, что это поможет вам создавать слайды с кодом быстрее и лучше.

Знай свои инструменты

Ознакомьтесь с инструментами для форматирования кода и подсветки синтаксиса.

IDE

Популярным выбором для многих языков являются JetBrains IDE или VS Code.
Существуют также некоторые полезные расширения для IDE, которые могут помочь вам делать скриншоты прямо из редактора, например Code screenshots или Polacode.

Текстовые редакторы общего назначения

Я использую Возвышенный текст. Он поддерживает подсветку синтаксиса для многих языков и имеет множество полезных расширений. Мои наиболее часто используемые команды для работы с небольшими фрагментами кода: Set syntax: %language_name% для использования подсветки синтаксиса для определенного языка в текущем файле и Reindent Lines для применения автоматического отступа. Доступ к обеим командам можно получить через командное меню с помощью ярлыка Ctrl/Command + Shift + P.

Онлайн-инструменты

Лучший онлайн-инструмент, который я когда-либо видел, — это Carbon. Он поддерживает множество языков, имеет множество цветовых тем, современный дизайн и предлагает множество вариантов настройки цветовой темы.

Это мои любимые инструменты для создания форматированного и визуально привлекательного фрагмента кода, но на рынке есть и другие продукты. Что еще вы используете? Пожалуйста, поделитесь своей настройкой в ​​комментариях!

Подготовьте пресеты форматирования и выделения

Подготовьте и сохраните конфигурацию для вашего редактора.

Можно импортировать и экспортировать конфигурации стилей кода для IntelliJ Idea. Для удобства я храню их в репозитории GitHub: Idea Config. Вы можете применить эту конфигурацию стиля кода в Settings → Editor → Code Style → Scheme → Import Scheme → IntelliJ IDEA code style XML и выбрать файл конфигурации. Это же меню позволяет экспортировать текущую схему. Создайте свою конфигурацию, сохраните ее в репозитории и используйте, когда вам нужно иметь свой стиль кода в IDE.

Также храню цветовые схемы для Carbon. У Carbon есть много готовых к использованию тем, но вы можете настраивать и делиться своими конфигурациями. Мои конфиги и инструкции по их применению вы можете найти здесь: Carbon Config.

Имейте темные и светлые пресеты

Создавайте пресеты как для светлой, так и для темной среды.

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

Выберите подходящий язык

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

Например, приложение Spark может быть написано как на Java, так и на Scala, но Scala-версия почти всегда будет короче и выразительнее.

Держать его коротким

Длинный код приемлем только тогда, когда вы хотите продемонстрировать, как ужасно выглядит длинный код.

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

Помните, что простота достигается не тогда, когда нечего добавить, а тогда, когда нечего убрать.

Полезные ссылки

Инструмент обмена изображениями Carbon Code — https://carbon.now.sh/.

Шаблоны кода — https://github.com/smyachenkov/code-slides-config.

Первоначально опубликовано на https://smyachenkov.com 10 августа 2020 г.