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

За последние пару лет я научился готовить слайды к выступлениям значительно быстрее, чем у меня получалось раньше. Этот пост — о том, как я это делаю, и почему считаю свой подход более удобным, чем Powerpoint или Keynote.app.

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

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

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

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

Anyway. Изменить среду так, чтобы она помогала, а не отвлекала, проще, чем изменить себя. Я стал искать более подходящий инструмент, с которым моё внимание расходовалось бы на важные дела, а не на допиливание мелочей.

WYSIWYG или не WYSIWYG

Если вы умеете писать код или хотя бы не боитесь простых языков разметки, то в подобных задачах у вас есть два возможных решения:

1. WYSIWYG — визуальные редакторы, в которых вы делаете всё мышкой (те же Powerpoint и Keynote.app).
2. Текстовая разметка, которая компилируется в итоговый документ.

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

Какой вариант лучше?

В идеальном мире (в котором у меня бы было неограниченное время на освоение всех инструментов, все люди в моих проектах не боялись их осваивать, и инструменты обоих видов были бы одинаково хорошо проработаны) я бы всегда решал эту дилемму в пользу второго варианта.

Текстовую разметку проще редактировать, проще конвертировать в другие форматы, она прозрачнее и легковеснее.

К сожалению, в реальном мире у подхода «только опенсорс и консольные инструменты, все данные в текстовом формате» есть множество минусов. В частности:

1. Затраты на освоение. Например, не знаю LaTeX (язык для вёрстки сложных документов), и не могу позволить себе выделить несколько дней, чтобы начать в нём ориентироваться.
2. Сложность в командной работе. Даже если бы я знал LaTeX и Beamer (расширение LaTeX для презентаций), другие люди в моих проектах вероятно отказались бы изучать его, чтобы исправлять мои слайды.
3. Эстетика. По умолчанию Beamer выглядит довольно вырвиглазно; это в принципе исправимо, но, насколько я понимаю, исправление само по себе требует немало усилий.

В общем, прагматичные решения требуют компромиссов. Я не считаю, что всегда надо брать unix-way, command-line, programmer-friendly, open-source, self-hosted тулзы.

Конкретно в случае со слайдами, к счастью, получилось найти хороший баланс.

Чем хорош gnab/remark

Я не хочу пересказывать официальную документацию, так что сходите на remarkjs.com и пролистайте заглавную презентацию там, чтобы понять, как это работает. (Вкратце: вы описываете слайды в markdown-подобном синтаксисе, заворачиваете их в простой html-файл, и загружаете его в браузере).

Ключевые плюсы для меня:

1. Я пишу слайды в простой текстовой разметке и они получаются достаточно приятными на вид.
2. У меня есть полный контроль над внешним видом слайдов, и я могу применить стили одновременно ко всем страницам презентации или даже к множеству существующих презентаций с помощью кастомного css.
3. Remark достаточно простой, чтобы другие тренеры из команды Кочерги тоже могли им пользоваться и не страдать.
4. И главное — remark не отвлекает меня от написания содержательной части; по сути, я могу взять черновой план выступления и превратить его в слайды, не выходя из текстового редактора.

Суммарно на подготовку одной колоды из 30-40 слайдов у меня теперь уходит 15-30 минут.

В некоторых случаях мне пришлось немного допилить remark для своего удобства:

1. У меня есть стандартный css-файл, который я подгружаю во все слайды; для слайдов, которые мы показываем на воркшопах, он выглядит так: https://gist.github.com/berekuk/ea5dadb528fc7a438d93d25158266ffb. В нём есть стандартные шрифты и несколько кастомных css-классов. Наиболее важный класс в этом файле — .center-image-wide, он позволяет подогнать картинку по размеру слайда, вместо того чтобы пытаться её перемасштабировать заранее.
2. Разметку для слайдов можно встроить прямо в html-файл, а можно хранить снаружи в отдельном md-файле. Для воркшопных слайдов мы используем второй способ. Чтобы не копировать одинаковый html-файл для каждой отдельной презентации, я написал простой скрипт, который копирует одинаковый index.html во все папки со слайдами.

Но суммарно оба эти пункта не заняли у меня много времени.

remark vs remark

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

Дело в том, что на воркшопах мы не только показываем слайды, но и раздаём участникам рабочие тетради, материал которых в значительной мере пересекаются со слайдами. Синхронизировать слайды и тетради вручную — довольно муторное занятие.

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

Решение, которое я придума (но ещё не реализовал), включает в себя другую js-библиотеку... которая тоже называется remark. Да, это один из самых кошмарных примеров коллизий имён, который я когда-либо встречал.

В этом посте выше я писал о gnab/remark, инструменте для создания презентаций.

Но ещё есть remarkjs/remark, парсер маркдауна и экосистема для плагинов для парсинга маркдауна.

remarkjs/remark предоставляет только возможность из разметки получить AST (синтаксическое дерево). Это не полноценный инструмент для создания презентаций, и собственно презентационный слой придётся собирать самому из других библиотек (я смотрю в сторону spectacle). Но зато из AST можно собрать много что ещё, кроме слайдов (документы для печати, PDF для рассылок), и remarkjs/remark позволяет добавлять расширения синтаксиса.

В разметке могут быть макросы, упрощающие типовые действия (например, генерирующие разлиновку строк для упражнений в рабочих тетрадях). Или указатели «в этом месте надо завести таймер на 5 минут на время упражнения». Или возможность пометить какой-то блок как «только для слайдов» или «только для тетрадей».

У меня уже есть proof-of-concept для генерации markdown -> docx, который оказался не очень сложным, так что и остальное должно сойтись.

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

От того, чтобы написать свой таск-трекер, я пока что сдержался. А вот от написания движка для презентаций, похоже, не удержусь.

Впрочем, для обычных презентаций я собираюсь продолжать использовать gnab/remark в любом случае.