Marpit - это фреймворк для экономии времени, позволяющий сосредоточиться на содержании. Откройте для себя это.

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

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

В следующих разделах мы узнаем, что такое Marpit и как создать прекрасную презентацию за несколько минут, используя синтаксис Markdown.

Что такое Марпит

Marpit - это фреймворк для создания презентации, начиная с текста Markdown. Вы еще не знакомы с Markdown?

Что ж, Markdown - это текстовый формат, который позволяет нам сосредоточиться на контенте, написав текст, не теряя времени на форматирование. Например, если вы напишете «# мой заголовок», у вас будет большой и жирный заголовок вверху страницы.

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

Что ж, если вы знаете, что Markdown делает для форматирования текста, Marpit делает то же самое для презентации.

У Marpit есть мощный драйвер: он дает отличный опыт для создания красивых слайдов.

Вам нужно только сосредоточиться на написании своей истории в документе Markdown. Независимо от текстового поля, размера шрифта, выравнивания элементов.

Это не просто вопрос времени; речь идет о сосредоточении на том, что вы делаете. Каждое отвлечение от написания контента снижает качество документа.

Как это использовать

Вы можете установить клиентское приложение, интегрировать его в свое приложение, но я расскажу простой способ: используйте Visual Studio Code. Внутри Visual Studio Code вам нужно всего лишь один маленький шаг: активировать плагин Marpit. Вы запустите обычный документ Markdown (расширение. MD) и увидите предварительный просмотр того, что вы пишете. Это встроенная функция VS Code, но, поскольку вы установили плагин, теперь он поддерживает специальные функции рендеринга Marpit.

Проще говоря, вы можете начать писать свою презентацию, используя синтаксис Markdown.

Вы можете попробовать скопировать \ вставить следующий пример в свой VSCode и посмотреть на результат. Первая часть содержит директиву marp: true , которая сообщает, что это специальный документ Markdown, подходящий для рисования Marpit. Здесь вы можете указать дополнительные параметры, например, запросить страницу или изменить цвет фона. Пакет Marpit содержит множество тем, на которые вы можете переключиться. В этом примере мы использовали uncover.

Каждой тройкой «-» вы завершаете слайд и добавляете новый.

---
title: Markdow presentatioin
description: An example slide deck created using Marpit
paginate: true
marp: true
theme: uncover
---
# Marp slide deck
<!-- _class: invert -->
![bg](http://url-to-file)
## The big slogan <!-- fit -->
---
# new slide
![bg right](https://picsum.photos/720?image=29)
![bg](https://picsum.photos/720?image=20)
- one
- two
- three

На следующей картинке вы можете увидеть результат. На снимке экрана показана IDE Visual Studio Code; слева код документа, справа слайд-колода готова к экспорту.

Вы можете увидеть вывод слайдов сразу после редактирования Markdown с предварительным просмотром в реальном времени.

Вы закончили писать? Давайте поделимся колодой любимым способом! Мы можем конвертировать Markdown в готовый для презентации HTML, более того, напрямую в документы PDF и PowerPoint!

Основы Marpit

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

Заголовок и директивы

Перед всеми слайдами есть раздел документа, содержащий настройки. См. Примеры ниже:

title: Markdow presentatioin
description: An example slide deck created using Marpit
paginate: true
marp: true
theme: uncover

С этими настройками мы просим использовать тему «раскрыть» с номером страницы на каждом слайде, и мы устанавливаем заголовок и описание.

Этот фрагмент кода должен быть первым в документе, и вам нужно поставить тройной знак «-» в конце.

Директивы делятся на локальные и глобальные. Как следует из названия, локальная директива действует по слайдам, а глобальная - на уровне документа.

Глобальные настройки:

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

Локальные настройки:

  • paginate Показывает номер страницы на слайде или нет
  • headerУкажите фиксированное содержание заголовка слайда.
  • footer то же самое, что и заголовок, но в области нижнего колонтитула
  • classУкажите HTML-класс <section> элемента слайда.
  • backgroundColorУстановка background-color стиля слайда.
  • backgroundImageУстановка background-image стиля слайда.
  • backgroundPositionУстановка background-position стиля слайда.
  • backgroundRepeatУстановка background-repeat стиля слайда.
  • backgroundSizeНастройка
  • background-size стиль слайда.
  • colorУстановка color стиля слайда.

Вы можете изменить глобальные настройки для одного слайда, добавив перед именем настройки _. Директивы могут быть установлены в теле документа с помощью комментариев HTML. Таким образом, вы можете добавить class: invert внутри заголовка или <!-- class: invert --> внутри тела.

В следующем фрагменте кода класс «инвертировать» применяется только к текущему слайду, но если вы удалите _, этот параметр будет применен ко всем следующим слайдам.

---
# Marp slide deck
<!-- _class: invert -->
![bg](http://url-to-file)
## The big slogan <!-- fit -->

Изображений

Добавить изображение очень просто и выполняется с использованием обычного синтаксиса Markdown, но с использованием пространства заголовка для добавления директив.

![directives goes here](path to the image)

Путь может быть URL-адресом веб-ресурса или локального файла. Используя директиву, вы можете:

  • добавьте фильтры CSS, такие как размытие, яркость, контраст, тень, оттенки серого, поворот оттенка, инвертирование и т. д.
  • используйте его как фон. Используя директиву bg, изображение можно установить в качестве фона, а не в качестве содержимого. Это можно комбинировать с положением (слева, справа) и размерами

Некоторые примеры изображений:

![bg left](https://picsum.photos/720?image=29) (image on the left, with text on the right)
---
![bg left:33%](https://picsum.photos/720?image=29) (same of above, but image is 33% of the slide)
---
![bg right](https://picsum.photos/720?image=3) 
![bg](https://picsum.photos/720?image=20)(two images on the right, appear as two slices. each slice is the 25% of the slide width)

Пример дает следующий результат:

Более подробно с синтаксисом можно ознакомиться на официальном сайте Marpit.

За и против

По сравнению с традиционными средствами автоматизации делопроизводства у нас много преимуществ:

  1. Сосредоточьтесь на содержании. Не отвлекайтесь, позвольте вам уделять время важным вещам.
  2. Скорость. Автоматизация бесполезных вещей ускоряет работу.
  3. Автономный документ. Один файл содержит все слайды и темы.

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

Вот основные минусы этого решения:

  1. Это не совместная работа. Почти вы разработчик или люди, которые привыкли делиться файлами в репозитории, например GitHub, файл Markdown остается на вашем компьютере, и это плохо. Если вы делитесь с помощью облачной системы обмена файлами, такой как OneDrive или Google Drive, вы можете поделиться им с членами команды, но вы потеряете все совместные части встроенных инструментов презентации, такие как комментирование.
  2. Вы должны знать Markdown или изучить его. Даже он очень прост в освоении, тем, кто не привык к нему, нужно немного, чтобы стать продуктивным с синтаксисом Markdown. Markdown очень просто применить на практике, но изучение этого небольшого пробела может вызвать трения, если вы хотите внедрить его в масштабах всей компании.

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

Что взять домой

Markdown - это упрощение написания документов. Это ускоряет создание документов, избегая части работы, связанной с форматированием.

Причем наиболее существенная экономия - это сосредоточение внимания на содержании, а не на внешнем виде.

Фактически, используя Markdown, вы не отвлекаетесь от создания контента.

Благодаря фреймворку Marpit мы можем получить те же преимущества и при проведении презентаций. Вы можете написать простой текстовый файл и отобразить его как презентацию, используя в качестве вывода PDF, PowerPoint или HTML.

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

Для всех остальных сценариев это решение очень эффективно и продуктивно. Более того, в случае программных проектов очень легко добавить его в базу кода и задокументировать код внутри репозитория исходного кода. Используя Marpit, вы можете добавлять как презентации, так и документы.

Конкретный способ сказать мне спасибо

Если вам понравилась моя статья, вы можете подписаться по этой ссылке, и Medium вернет мне кредит. Это мелочь, которая побудит меня идти вперед. Это работает, даже если вы уже являетесь платным клиентом, поэтому не сомневайтесь, я верну вам много других статей!