Речь пойдет не про презентации, которые менеджеры делают на квартальные отчеты. А про слайды-якоря по которым можно строить свой рассказ. Стала передо мной необходимость создавать много презентаций, в относительно сжатые сроки. Делать их в powerpoint смысла ноль. К тому-же хотелось со временем добавлять ништячков в оформление, да и просто иметь одинаковый дизайн всех презенташек вне зависимости от их возраста.

Начал с написания своего велосипеда, тут можно глянуть на результат (прогресс, навигация по якорям, возможность дать ссылку не только на слайд по индексу, но и по заголовку). Основная идея заключалась в том, чтобы, вместо верстки слайдов, специальным образом их размечать тегами (без классов и дополнительных рюшечек). Все остальное скрипт генерирует налету. Второе решение, которое должно было бы упростить работу — подключение внешних файлов (как стилей, так и скриптов) в едином main.js. Таким образом можно и базовую библиотеку обновить, и стили всех презенташек изменить разом.

На определенном моменте, стало понятно, что движусь не в ту сторону. Вернее в ту, в которую уже кто-то двигался до меня. Последовало исследование сегодняшнего рынка js презентаций, в итоге остановился на revealjs. Выглядит симпотно, и эффектов не такая куча, как в некоторых других. В нем ряд вопросов решен: подсветка синтаксиса, анимашки, апишка (планирую прикрутить удаленное управление по вебсокетам). Удаленное управление есть, но тормозит оно безбожно. Еще приятным бонусом оказалась поддержка markdown (с разбитием на слайды).

Имея на руках такой плацдарм, упростить процесс написания презентаций до невозможного:

• все слайды размечаются в markdown во внешнем файле.
• подгрузка презентации реализована через параметр в URl.

Из неприятного — revealjs использует в поставке по умолчанию шрифты без кириллических символов. Поэтому шрифт подгружаю отличный от оригинального.

Отдельная тема с подсветкой кода. Для подсветки revealjs ипользует ту же библиотеку, highlightjs, что и этот блог. highlightjs определяет язык, на котором написан код, по классу контейнера с кодом. Иначе она пробует подобрать самостоятельно язык. Так как у меня примеры часто имеют не более 3-х строчек, и написаны на js, highlightjs часто ошибается в определении языка. Ставить класс в markdown нет возможности. Задача решается добавлением комментария к коду, и доработкой highlightjs напильничком, чтобы та подсвечивала код с определенным комментарием как javascript-овый.

Итого:

• презентации — чистые markdown файлы
• для всех презентаций единый файл, один стиль

Пример презентации, исходный код.