skip to content
Архитектура в курилке

Презентации из терминала

/ чтиво на 3 минуты

гайд , у вас дохера времени
Содержание

Проблематика

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

Но это не тот случай.

До сих пор я еще не находил лучше вариантов чем тот же PowerPoint.

Могу только придумать две причины, почему стоит этим пользоваться:

  1. У Вас на компьютере нет ничего, но надо более менее быстро запилить простенькую презентацию и лень ставить <здесь по вкусу>Office

  2. Показать всем, какой Вы гуру opensource-а, терминала и тому подобного

Если Вы нашли себя в этом или просто праздно решили почитать, то welcome.

Marp

Ссыль на проект

Позиционируют себя как Markdown Presentation Ecosystem. Построены на базе небольшого фреймворка для построения слайдов на базе CSS/HTML Marpit.

Пример из их доки:

---
theme: gaia
_class: lead
paginate: true
backgroundColor: #fff
backgroundImage: url('https://marp.app/assets/hero-background.svg')
---


![bg left:40% 80%](https://marp.app/assets/marp.svg)


# **Marp**


Markdown Presentation Ecosystem


https://marp.app/


---


# How to write slides


Split pages by horizontal ruler (`---`). It's very simple! :satisfied:


` ``` `markdown
# Slide 1


foobar


---


# Slide 2


foobar
` ``` `

И так такой простой код рендерится в 2 слайда:

Marp preview

Рассмотрим подробнее некоторые особенности.

Рендеринг

Рендерить готовую презентацию можно несколькими способами. На офф сайте пишут про два основных - CLI и VS Code.

В случае с VS Code-ом ставится расширение. После этого работают Живые preview слайдов, экспорт в различные форматы и прочее. Если Вы любите работать в VS Code - то это вариант для Вас.

Второй вариант - поставить утилиту marp и рендерить с помощью нее.

Terminal window
# Arch Linux
yay -S marp-cli-bin


# MacOS
brew install marp-cli


# И так далее

После этого все просто:

Terminal window
# Preview в браузере
marp ./prezentation.md --preview


# Экспорт в PowerPoint
marp ./prezentation.md --pptx


# Экспорт в PDF
marp ./prezentation.md --pdf

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

Синтаксис

Любая презентация в Marp начинается с заголовка:

---
theme: gaia
_class: lead
paginate: true
backgroundColor: #fff
backgroundImage: url('https://marp.app/assets/hero-background.svg')
---

Здесь задаются тема, нумерация страниц, общие фоны…

Дальше идет самый обычный Mardkown. Тут все как обычно: заголовок слайда как H1 - # Титульный слайд, работают курсивы, полужирные шрифты, блоки кода.

Изображения

Интересная работа с картинками - обычно в квадратных скобочках указывается alt для той или иной картинки, здесь же настраиваются параметры картинки. К примеру:

![width:200px height:30cm](image.jpg)

Здесь для картинки задаются ширина и высота в пикселях.

![grayscale:1](image.jpg)

Здесь картинка становится черно-белой.

![bg](image.jpg)

Здесь картинка станет фоном для текущего слайда

![bg left](image.jpg)

Здесь слайд поделится на 2 половины, слева будет картинка, а справа - содержимое слайда.

Вариантов полно, подробнее искать туть

Но порой приходится прибегать к вставкам на HTML/CSS. Например, если нам надо, чтобы на слайде было несколько картинок в рядок, то вверху презентации прописывается кастомный код:

<style>
.container{
  display: flex;
}
.col {
  flex: 1;
}
</style>

А картинки на слайде прописываются как

<div class="container">


![w:240 h:320](./images/2/image_1.png)


![w:400 h:320](./images/2/image_2.png)


![w:240 h:320](./images/2/image_3.png)
</div>

Кастомные стили

Стилей полно, все они применяются по-своему, но в целом это решается следующими способами: либо мы прописываем директиву <style></style>, в которой описываем необходимые нам стили (как это было в примере выше).

Либо второй вариант - вынести все это дело в отдельный файл, в заголовке прописать имя кастомной темы и при рендеринге указать путь до этого файла:

Terminal window
marp ./prezentation.md --theme-set ./themes/custom.css --allow-local-files

Анимации

Если Вы экспортируете в PDF, то никаких анимаций не будет, но можно в целом начать со следующего:

<style>
@keyframes marp-outgoing-transition-slide-up {
  from { transform: translateY(0%); }
  to { transform: translateY(-100%); }
}
@keyframes marp-incoming-transition-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0%); }
}
</style>

В данном случае слайды будут просто уезжать вверх.

Данный функционал появился относительно недавно и отправной точкой можно считать вот эту статейку

Заключение

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