Интересная штука, в MarkDown по умолчанию html обрабатывается "из коробки", а вот в Marp он по умолчанию выключен, для предотвращения зловредного кода полученного вместе с презентацией. Но если вы захотите включить корректную обработку html тегов, то это можно сделать в File -> Preference -> Settings (Ctrl + ,):
Архив рубрики: Marp
Обработка 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:
После этого можем включить предварительный просмотр:
В режиме разделенного редактора в правой части будет виден результирующая презентация (напоминаю, все картинки кликабельны):
Пара замечаний:
--- - используется для разделения страниц. Единственно, не забываем, что перед --- надо оставлять строку. если это не сделать, то разделитель перестает работать:
Если пустые строки раздражают, можно воспользоваться другими разделителями ___ (три подчеркивания), *** (три звездочки) или - - - (те же три минуса, но через пробел).
Что еще есть полезного в Marp? Конечно же директивы. В первом блоке, где у нас был указан marp:true можно указывать директивы в синтаксисе имя_директивы: значение, а если нужно указать директиву на конкретной странице, то используется синтаксис html комментариев. Например:
Фон стал желтым, но на конкретном слайде он был заменен на белый, причем в этом случае у директивы использовался в начале знак подчеркивания:
Директивы делятся на глобальные и локальные. Глобальных не много, они позволяют задать тему (из набора стандартных), стиль оформления и еще один вариант разделения страницы на слайды. Я немного покажу про стили.
Стили задаются при помощи html элемента style:
Как и в обычном html можно задавать классы и применять стиль к ним, в примере задан стиль для титульной страницы (с классом tiltslide) и для всех остальныз страниц:
Ну и самое главное, экспорт. Для этого, достаточно кликнуть на появившемся в редакторе ярлыке Marp и выбрать экспорт:
Получается, весьма похоже:
Кроме pptx, можно экспортировать в pdf, html и изображения (png и jpg).
Итак, начинаем.
Для работы с Marp я буду использовать Visual Studio Code. Устанавливаем расширение для работы с Marp:
Создаем файл с расширением md:
После этого можем включить предварительный просмотр:
В режиме разделенного редактора в правой части будет виден результирующая презентация (напоминаю, все картинки кликабельны):
Пара замечаний:
marp: true
Используется, для пометки что мы используем 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:
После этого можем включить предварительный просмотр:
В режиме разделенного редактора в правой части будет виден результирующая презентация (напоминаю, все картинки кликабельны):
Пара замечаний:
--- - используется для разделения страниц. Единственно, не забываем, что перед --- надо оставлять строку. если это не сделать, то разделитель перестает работать:
Если пустые строки раздражают, можно воспользоваться другими разделителями ___ (три подчеркивания), *** (три звездочки) или - - - (те же три минуса, но через пробел).
Что еще есть полезного в Marp? Конечно же директивы. В первом блоке, где у нас был указан marp:true можно указывать директивы в синтаксисе имя_директивы: значение, а если нужно указать директиву на конкретной странице, то используется синтаксис html комментариев. Например:
Фон стал желтым, но на конкретном слайде он был заменен на белый, причем в этом случае у директивы использовался в начале знак подчеркивания:
Директивы делятся на глобальные и локальные. Глобальных не много, они позволяют задать тему (из набора стандартных), стиль оформления и еще один вариант разделения страницы на слайды. Я немного покажу про стили.
Стили задаются при помощи html элемента
Итак, начинаем.
Для работы с Marp я буду использовать Visual Studio Code. Устанавливаем расширение для работы с Marp:
Создаем файл с расширением md:
После этого можем включить предварительный просмотр:
В режиме разделенного редактора в правой части будет виден результирующая презентация (напоминаю, все картинки кликабельны):
Пара замечаний:
marp: true
Используется, для пометки что мы используем marp. Если не указать эту строку, или указать значение false, то модуль выключится и мы будем получать стандартное отображение для MarkDown:--- - используется для разделения страниц. Единственно, не забываем, что перед --- надо оставлять строку. если это не сделать, то разделитель перестает работать:
Если пустые строки раздражают, можно воспользоваться другими разделителями ___ (три подчеркивания), *** (три звездочки) или - - - (те же три минуса, но через пробел).
Что еще есть полезного в Marp? Конечно же директивы. В первом блоке, где у нас был указан marp:true можно указывать директивы в синтаксисе имя_директивы: значение, а если нужно указать директиву на конкретной странице, то используется синтаксис html комментариев. Например:
Фон стал желтым, но на конкретном слайде он был заменен на белый, причем в этом случае у директивы использовался в начале знак подчеркивания:
Если знак подчеркивания убрать, вот так:
То директива будет действовать не только на текущий слайд, но и на последующие:
Директивы делятся на глобальные и локальные. Глобальных не много, они позволяют задать тему (из набора стандартных), стиль оформления и еще один вариант разделения страницы на слайды. Я немного покажу про стили.
Стили задаются при помощи html элемента
MarkDown для презентаций
Тут как то писал про инструмент построения UML диаграмм при помощи PlantUML. Сегодня поговорим про еще один инструмент на основе плоского текст - Marp. Он позволяет описывать презентации в виде текста (который будет нормально мерджится в том же Git-е) и генерировать на его основе презентацию в pptx, pdf или html.
Итак, начинаем.
Для работы с Marp я буду использовать Visual Studio Code. Устанавливаем расширение для работы с Marp:
Создаем файл с расширением md:
После этого можем включить предварительный просмотр:
В режиме разделенного редактора в правой части будет виден результирующая презентация (напоминаю, все картинки кликабельны):
Пара замечаний:
--- - используется для разделения страниц. Единственно, не забываем, что перед --- надо оставлять строку. если это не сделать, то разделитель перестает работать:
Если пустые строки раздражают, можно воспользоваться другими разделителями ___ (три подчеркивания), *** (три звездочки) или - - - (те же три минуса, но через пробел).
Что еще есть полезного в Marp? Конечно же директивы. В первом блоке, где у нас был указан marp:true можно указывать директивы в синтаксисе имя_директивы: значение, а если нужно указать директиву на конкретной странице, то используется синтаксис html комментариев. Например:
Фон стал желтым, но на конкретном слайде он был заменен на белый, причем в этом случае у директивы использовался в начале знак подчеркивания:
Директивы делятся на глобальные и локальные. Глобальных не много, они позволяют задать тему (из набора стандартных), стиль оформления и еще один вариант разделения страницы на слайды. Я немного покажу про стили.
Стили задаются при помощи html элемента style:
Как и в обычном html можно задавать классы и применять стиль к ним, в примере задан стиль для титульной страницы (с классом tiltslide) и для всех остальныз страниц:
Ну и самое главное, экспорт. Для этого, достаточно кликнуть на появившемся в редакторе ярлыке Marp и выбрать экспорт:
Получается, весьма похоже:
Кроме pptx, можно экспортировать в pdf, html и изображения (png и jpg).
Итак, начинаем.
Для работы с Marp я буду использовать Visual Studio Code. Устанавливаем расширение для работы с Marp:
Создаем файл с расширением md:
После этого можем включить предварительный просмотр:
В режиме разделенного редактора в правой части будет виден результирующая презентация (напоминаю, все картинки кликабельны):
Пара замечаний:
marp: true
Используется, для пометки что мы используем marp. Если не указать эту строку, или указать значение false, то модуль выключится и мы будем получать стандартное отображение для MarkDown:--- - используется для разделения страниц. Единственно, не забываем, что перед --- надо оставлять строку. если это не сделать, то разделитель перестает работать:
Если пустые строки раздражают, можно воспользоваться другими разделителями ___ (три подчеркивания), *** (три звездочки) или - - - (те же три минуса, но через пробел).
Что еще есть полезного в Marp? Конечно же директивы. В первом блоке, где у нас был указан marp:true можно указывать директивы в синтаксисе имя_директивы: значение, а если нужно указать директиву на конкретной странице, то используется синтаксис html комментариев. Например:
Фон стал желтым, но на конкретном слайде он был заменен на белый, причем в этом случае у директивы использовался в начале знак подчеркивания:
_backgroundColor: white
Если знак подчеркивания убрать, вот так:backgroundColor: white
То директива будет действовать не только на текущий слайд, но и на последующие:
Директивы делятся на глобальные и локальные. Глобальных не много, они позволяют задать тему (из набора стандартных), стиль оформления и еще один вариант разделения страницы на слайды. Я немного покажу про стили.
Стили задаются при помощи html элемента style:
Как и в обычном html можно задавать классы и применять стиль к ним, в примере задан стиль для титульной страницы (с классом tiltslide) и для всех остальныз страниц:
Ну и самое главное, экспорт. Для этого, достаточно кликнуть на появившемся в редакторе ярлыке Marp и выбрать экспорт:
Получается, весьма похоже:
Кроме pptx, можно экспортировать в pdf, html и изображения (png и jpg).