Архив рубрики: Marp

Обработка html в Marp при использовании Visual Studio Code

Интересная штука, в MarkDown по умолчанию html обрабатывается "из коробки", а вот в Marp он по умолчанию выключен, для предотвращения зловредного кода полученного вместе с презентацией. Но если вы захотите включить корректную обработку html тегов, то это можно сделать в File -> Preference -> Settings (Ctrl + ,):


Обработка html в Marp при использовании Visual Studio Code

Интересная штука, в MarkDown по умолчанию html обрабатывается "из коробки", а вот в Marp он по умолчанию выключен, для предотвращения зловредного кода полученного вместе с презентацией. Но если вы захотите включить корректную обработку html тегов, то это можно сделать в File -> Preference -> Settings (Ctrl + ,):


MarkDown для презентаций

Тут как то писал про инструмент построения UML диаграмм при помощи PlantUML. Сегодня поговорим про еще один инструмент на основе плоского текст - Marp. Он позволяет описывать презентации в виде текста (который будет нормально мерджится в том же Git-е) и генерировать на его основе презентацию в pptx, pdf или html.

Итак, начинаем.

Для работы с Marp я буду использовать Visual Studio Code. Устанавливаем расширение для работы с Marp:
Создаем файл с расширением md:
После этого можем включить предварительный просмотр:
В режиме разделенного редактора в правой части будет виден результирующая презентация (напоминаю, все картинки кликабельны):

Пара замечаний:
marptrue
Используется, для пометки что мы используем marp. Если не указать эту строку, или указать значение false, то модуль выключится и мы будем получать стандартное отображение для MarkDown:

--- - используется для разделения страниц. Единственно, не забываем, что перед --- надо оставлять строку. если это не сделать, то разделитель перестает работать:
Если пустые строки раздражают, можно воспользоваться другими разделителями ___ (три подчеркивания), *** (три звездочки) или - - - (те же три минуса, но через пробел).

Что еще есть полезного в Marp? Конечно же директивы. В первом блоке, где у нас был указан marp:true можно указывать директивы в синтаксисе имя_директивы: значение, а если нужно указать директиву на конкретной странице, то используется синтаксис html комментариев. Например:
Фон стал желтым, но на конкретном слайде он был заменен на белый, причем в этом случае у директивы использовался в начале знак подчеркивания:
_backgroundColor: white
Если знак подчеркивания убрать, вот так:
backgroundColor: white
То директива будет действовать не только на текущий слайд, но и на последующие:

Директивы делятся на глобальные и локальные. Глобальных не много, они позволяют задать тему (из набора стандартных), стиль оформления и еще один вариант разделения страницы на слайды. Я немного покажу про стили.
Стили задаются при помощи html элемента style:
Как и в обычном html можно задавать классы и применять стиль к ним, в примере задан стиль для титульной страницы (с классом tiltslide) и для всех остальныз страниц:

Ну и самое главное, экспорт. Для этого, достаточно кликнуть на появившемся в редакторе ярлыке Marp и выбрать экспорт:
Получается, весьма похоже:
Кроме pptx, можно экспортировать в pdf, html и изображения (png и jpg).

MarkDown для презентаций

Тут как то писал про инструмент построения UML диаграмм при помощи PlantUML. Сегодня поговорим про еще один инструмент на основе плоского текст - Marp. Он позволяет описывать презентации в виде текста (который будет нормально мерджится в том же Git-е) и генерировать на его основе презентацию в pptx, pdf или html.

Итак, начинаем.

Для работы с Marp я буду использовать Visual Studio Code. Устанавливаем расширение для работы с Marp:
Создаем файл с расширением md:
После этого можем включить предварительный просмотр:
В режиме разделенного редактора в правой части будет виден результирующая презентация (напоминаю, все картинки кликабельны):

Пара замечаний:
marptrue
Используется, для пометки что мы используем marp. Если не указать эту строку, или указать значение false, то модуль выключится и мы будем получать стандартное отображение для MarkDown:

--- - используется для разделения страниц. Единственно, не забываем, что перед --- надо оставлять строку. если это не сделать, то разделитель перестает работать:
Если пустые строки раздражают, можно воспользоваться другими разделителями ___ (три подчеркивания), *** (три звездочки) или - - - (те же три минуса, но через пробел).

Что еще есть полезного в Marp? Конечно же директивы. В первом блоке, где у нас был указан marp:true можно указывать директивы в синтаксисе имя_директивы: значение, а если нужно указать директиву на конкретной странице, то используется синтаксис html комментариев. Например:
Фон стал желтым, но на конкретном слайде он был заменен на белый, причем в этом случае у директивы использовался в начале знак подчеркивания:
Если знак подчеркивания убрать, вот так:
То директива будет действовать не только на текущий слайд, но и на последующие:

Директивы делятся на глобальные и локальные. Глобальных не много, они позволяют задать тему (из набора стандартных), стиль оформления и еще один вариант разделения страницы на слайды. Я немного покажу про стили.
Стили задаются при помощи html элемента

MarkDown для презентаций

Тут как то писал про инструмент построения UML диаграмм при помощи PlantUML. Сегодня поговорим про еще один инструмент на основе плоского текст - Marp. Он позволяет описывать презентации в виде текста (который будет нормально мерджится в том же Git-е) и генерировать на его основе презентацию в pptx, pdf или html.

Итак, начинаем.

Для работы с Marp я буду использовать Visual Studio Code. Устанавливаем расширение для работы с Marp:
Создаем файл с расширением md:
После этого можем включить предварительный просмотр:
В режиме разделенного редактора в правой части будет виден результирующая презентация (напоминаю, все картинки кликабельны):

Пара замечаний:
marptrue
Используется, для пометки что мы используем marp. Если не указать эту строку, или указать значение false, то модуль выключится и мы будем получать стандартное отображение для MarkDown:

--- - используется для разделения страниц. Единственно, не забываем, что перед --- надо оставлять строку. если это не сделать, то разделитель перестает работать:
Если пустые строки раздражают, можно воспользоваться другими разделителями ___ (три подчеркивания), *** (три звездочки) или - - - (те же три минуса, но через пробел).

Что еще есть полезного в Marp? Конечно же директивы. В первом блоке, где у нас был указан marp:true можно указывать директивы в синтаксисе имя_директивы: значение, а если нужно указать директиву на конкретной странице, то используется синтаксис html комментариев. Например:
Фон стал желтым, но на конкретном слайде он был заменен на белый, причем в этом случае у директивы использовался в начале знак подчеркивания:
_backgroundColor: white
Если знак подчеркивания убрать, вот так:
backgroundColor: white
То директива будет действовать не только на текущий слайд, но и на последующие:

Директивы делятся на глобальные и локальные. Глобальных не много, они позволяют задать тему (из набора стандартных), стиль оформления и еще один вариант разделения страницы на слайды. Я немного покажу про стили.
Стили задаются при помощи html элемента style:
Как и в обычном html можно задавать классы и применять стиль к ним, в примере задан стиль для титульной страницы (с классом tiltslide) и для всех остальныз страниц:

Ну и самое главное, экспорт. Для этого, достаточно кликнуть на появившемся в редакторе ярлыке Marp и выбрать экспорт:
Получается, весьма похоже:
Кроме pptx, можно экспортировать в pdf, html и изображения (png и jpg).