Недавно я решил для создания презентаций уйти от PowerPoint и его аналогов и попробовать софт, который их генерирует по текстовым файлам. Конечно, для такой задачи в первую очередь в качестве замены напрашивается LaTeX, но я пока не готов тратить много времени на погружение в эту экосистему и полноценно изучать этот язык разметки, поэтому начал искать менее очевидные варианты. По описанию меня заинтересовали несколько инструментов — это Marp, Slidev и связка reveal.js + Pandoc. По-хорошему, надо бы попробовать их все, но я пока успел применить на практике только Marp, который, вроде бы, считается более простым в использовании. Оставшиеся два варианта, как утверждают искусственные интеллекты, предназначены для тех, кто хорошо разбирается во фронтенд-разработке. Я себя к фронтендерам совсем не отношу, поэтому оставил Slidev и reveal.js на потом, хотя по описанию Slidev мне сначала понравился больше остальных. Ну и забегая вперед, при использовании Marp поверхностные знания CSS мне тоже пригодились.

В этом посте я коротко, не претендуя на подробный мануал, расскажу о том, что из себя представляет Marp, чтобы можно было себе представить, каким образом с помощью него создаются презентации.

Заголовок файла презентации

Marp я применил для создания презентации про Git, которую я уже испытал на живых студентах, оттуда я и буду показывать примеры кода. Полностью код этой презентации я выложил на GitHub. И параллельно с этим я присматриваюсь к томуё, есть ли смысл мне переделать под Marp другие презентации.

Все слайды для Marp описываются в одном файле в формате Markdown, который в начале содержит заголовок с общей информацией о презентации и данными, которые влияют на ее внешний вид. Этот заголовок выглядит следующим образом:

---
title: Введение в систему контроля версий git
author: Евгений Ильин
theme: church
paginate: true
math: katex
size: 16:9
style: |
  ...
---

Заголовочная часть начинается и заканчивается тройными дефисами. Из приведенного выше примера очевидно, что параметры title и author описывают соответственно общее название презентации и автора. Эта информация будет записана в метаинформацию создаваемого файла PDF. Этот же заголовок будет указан в теге <title> создаваемого файла HTML.

Затем с помощью параметра theme указывается применяемая тема, но про темы потом поговорим отдельно, по сути они представляют собой файлы стилей CSS. Затем в параметре style можно переопределить стили CSS из используемой темы или добавить свои стили.

Параметр paginate указывает, нужно ли на слайды добавлять нумерацию, а с помощью параметра math указывается, какой движок нужно использовать для отображения математических формул: KaTeX или MathJax.

Параметр size определяет соотношение сторон слайдов.

Описание слайдов

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

Например, заголовки оформляются с помощью предваряющих символов #, чем их больше, тем более вложенным является заголовок. Для вставки картинок используется выражение ![параметры](ссылка на картинку), для оформления блока с цитатой достаточно строку начать с символа «>». Поддерживается подсветка синтаксиса для различных языков программирования.

Например, если создать слайд со следующим содержимым:

---
# Пример "утиной" типизации

```python
def add(a, b):
    return a + b

foo = add(10, 20)
bar = add("hello ", "world")

print(f"{foo=}", f"{bar=}", sep="\n")
```

Результат:

```
foo=30
bar='hello world'
```

… то Marp создаст такой слайд:

Также поддерживаются другие элементы синтаксиса Markdown с некоторыми дополнениями.

Вот еще несколько примеров исходников и результатов генерации слайдов:

---
# Распределенные системы контроля версий

![center h:500px](img/git_distributed.png)

 

 

---
# Где взять git

> https://git-scm.com - официальный сайт

 

 

---
# Области действия настроек

* На уровне проекта
  Параметр: ```--local```
  Место хранения: файл ```.git/config```

* На уровне пользователя
  Параметр: ```--global```
  Место хранения в Windows: файл ```C:\Users\<ИмяПользователя>\.gitconfig```
  Место хранения в Linux: файл ```~/.gitconfig``` или ```~/.config/git/config```

* На уровне системы
  Параметр: ```--system```
  Место хранения в Windows: файл ```C:\Program Files\Git\etc\gitconfig```
  Место хранения в Linux: файл ```/etc/gitconfig```

 

 

Темы

Теперь что касается тем оформления. Это самое интересное. В процессе изучения принципов работы с Marp я больше всего времени потратил на то, чтобы подобрать тему, которая мне больше всего нравится, а затем ее немного обработать напильником под свои вкусы.

По сути,ё тема — это файл CSS с описанием стилей, определяющих, как нужно оформлять тот или иной элемент презентации. Хотя Marp и позволяет создавать презентации в форматах PDF или PPTX, все равно основным результатом работы движка Marp является связка HTML + CSS + JavaScript. Поэтому, если вы захотите что-то изменить в теме, понимать CSS надо. Удобно, что для коррекции темы не требуется исправлять исходный код этой темы, стили можно переопределять в заголовке файла презентации. Там же можно добавлять и свои стили, а внутри каждого слайда можно использовать «сырой» HTML.

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

Вот такой код:

---
<!-- _class: "chapter" -->
# Предварительная настройка git

создаст вот такой слайд:

Темы могут предоставлять классы для представления содержимого слайда в несколько столбцов. Ну или подобный стиль можно создать самостоятельно. Для той темы, которую я использовал, код слайда с несколькими столбцами оформляется следующим образом:

---
# Интерпретатор Python
<!-- _class: multicolumn -->
<div>

![h:200px](img/python-logo.svg)
</div>
<div>

> https://www.python.org
</div>

Правда, выглядит это немного коряво, здесь обязательно после открывающегося тега <div> нужно добавить пустую строку, чтобы парсер Marp внутри этого тега продолжил разбирать нотацию Markdown. Если этого не сделать, он будет считать, что после тега продолжается «сырой» HTML и не будет преобразовывать Markdown в HTML. Но зато в результате получится такой слайд:

Когда я только начинал использовать Marp, то, разумеется, я не планировал особо заморачиваться с написанием кода CSS для оформления слайдов. Прилагающихся «из коробки» тем всего три штуки, они меня не очень впечатлили, поэтому я начал искать сторонние темы. В принципе, в сети можно найти достаточно большое количество готовых тем для Marp. Например, на этой странице имеются ссылки на разные темы от сторонних разработчиков. Отдельно я бы выделил набор тем MarpX, именно среди них я и выбрал ту, которая мне больше всего подошла, но все равно потом к ней немного дописал свои стили. А еще мне очень понравилась тема, созданная для презентаций в одном немецком университете, я даже думал ее применить для своих презентаций, но в ней слишком много картинок, связанных с этим университетом, а переделывать его под МАИ я поленился. Но исходники темы открыты, лицензия позволяет изменять эту тему и использовать для своих задач.

Запуск Marp

И в завершение надо сказать о том, каким образом текст, описывающий презентацию, преобразовывается в HTML, PDF, PPTX или набор картинок.

С точки зрения пользователя Marp существует в двух реинкарнациях — в виде расширения для Visual Studio Code и в виде консольного приложения. Но на самом деле Marp объединяет в себе сразу несколько проектов — фреймворк Marpit, написанный на JavaScript, который занимается парсингом слайдов в формате Markdown; библиотеку Marp core, написанную на TypeScript, и которая работает поверх Marpit; консольную версию Marp CLI; расширение для Visual Studio Code.

Поскольку в качестве текстового редактора я использую в основном NeoVim, а не VS Code, то я использовал консольную версию. При запуске Marp запускается локальный сервер, который в зависимости от переданных ему параметров или однократно преобразует презентацию в нужный формат, или создает HTML-файл, содержащий все необходимые скрипты и стили, и начинает следить за изменением файла презентации и обновлять этот HTML. Для наблюдения за результатом работы в реальном времени можно открыть созданный HTML-файл в вашем любимом браузере или открыть окно предпросмотра самого Marp. Если поделить площадь экрана между окном редактора и браузером с открытым HTML-файлом, то наблюдать за внесенными изменениями очень удобно.

Запускать сервер из командной строки достаточно просто. Например, для режима наблюдения за изменениями я использовал следующую команду:

marp -w --html --theme-set ./themes -- presentation.md

Здесь параметр -w (или --watch) обозначает, что сервер запускается в режиме наблюдения за изменениями файла презентации. Параметр --html говорит о том, что надо разрешить использовать в презентации «сырой» HTML. С помощью параметра --theme-set я указываю, где искать файлы тем оформления, а после двух дефисов перечисляются файлы с презентациями, за которыми надо следить. Один сервер может работать сразу с несколькими презентациями.

Чтобы преобразовать презентацию в формат PDF, нужно выполнить такую команду:

marp --pdf --html --theme-set ./themes --allow-local-files -- presentation.md

Здесь добавляется параметр --pdf, а если нужно преобразовать в формат PowerPoint, то вместо этого параметра нужно указать --pptx. Можно еще преобразовывать презентации в набор картинок, тогда нужно задать параметр --images.

Еще в предыдущей команде я добавил параметр --allow-local-files, который обозначает, что нужно разрешить вставлять в файл PDF локальные файлы. В отличие от внедрения картинок, скачанных из интернета по ссылкам, внедрение локальных файлов считается небезопасным, если презентация пришла к вам от неизвестного источника, поэтому такое действие надо разрешать явным образом.

На этом остановлюсь, надеюсь, мне удалось донести основную идею, что из себя представляет Marp и как с его помощью делать презентации. Разумеется, за рамками этого поста остались разные особенности, связанные с оформлением слайдов, не обо всех возможностях я рассказал, которые, к тому же, зависят от используемой темы. Приложение командной строки тоже имеет еще несколько дополнительных параметров, о которых я не говорил. Но надеюсь, что мне удалось показать основные принципы создания презентаций с помощью Marp на случай, если вы захотите уйти от PowerPoint или его аналогов из других офисных пакетов.

PS. Вы можете подписаться на новости сайта через RSS, Группу Вконтакте или Канал в Telegram.