slides2pages

Развертывание Marp на страницах GitHub

Презентации на веб-страницах: мгновенно!

Что?

Marp позволяет создавать HTML-слайды из уценки (вот так!).

Эта презентация является одновременно веб-сайтом и README.md.

Почему?

Относитесь к своей презентации так же, как к коду.

• Используйте git для отслеживания изменений
• Запросы на включение для сотрудничества
• Развертывание автоматически
• Видите проблему? Откройте проблему!

Настраивать

Хотите создать свой собственный?

Сначала создайте новый репозиторий из репозитория шаблонов.

Настройка страниц GitHub

Откройте новый репозиторий и настройте публикацию.

Обычно вы будете использовать gh-pages в качестве ветки развертывания.

Обзор сборки

Перейдите на вкладку «Действия» и посмотрите, прошла ли сборка успешно (это может занять некоторое время).

Теперь вы должны увидеть сгенерированные файлы в ветке gh-pages .

Посмотреть веб-страницу

Откройте развернутую веб-страницу, чтобы просмотреть содержимое.

По умолчанию вы должны увидеть README.md как /index.html и /README.pdf . Слайды в docs/ также конвертируются.

Запуск локально

• Одноразовое преобразование без установки marp-cli

$ npx @marp-team/marp-cli@latest README.md -o build/README.pdf

---

• Или установите marp-cli в текущий каталог с помощью npm

$ npm install --save-dev @marp-team/marp-cli

• Выполнение приведенной выше команды создает файл package.json в текущем каталоге, например:

{
	"devDependencies" : {
		"@marp-team/marp-cli" : " ^4.0.0 "
	}
}

---

• Теперь команда marp доступна в текущем каталоге с префиксом npx

$ npx marp README.md -o build/README.pdf

• И вот результат

[  INFO ] Converting 1 markdown...
[  INFO ] README.md = > build/README.pdf

---

• Если у вас уже есть файл package.json в текущем каталоге, просто запустите его, чтобы установить указанные в нем пакеты.

$ npm install

Как этап рабочего процесса

Рабочий процесс выполняет эквивалентный шаг:

 - name: Marp Build (README.pdf)
  uses: docker://marpteam/marp-cli:v1.7.0
  with:
    args: README.md -o build/README.pdf
  env:
    MARP_USER: root:root

Обратите внимание, args соответствуют предыдущему слайду.

Настройка сборки

Все, что находится в папке build/ будет развернуто на страницах GitHub.

Вы можете скопировать дополнительные файлы или выполнить дальнейшие этапы обработки с помощью других инструментов.

Узнайте больше о Марпе

Это хорошее время, чтобы узнать больше о Марпе. Вот некоторые ресурсы:

• CommonMark
• Шпаргалка
• Темы
• CSS-темы
• Директивы
• Плагин VS-кода
• Онлайн-редактор Марп

Примеры сайтов

Известные сайты, использующие это действие:

• Курс CS 199 «Еще больше практики» Университета Иллинойса в Урбана-Шампейн (код)
• Исследование агентных моделей (код)

Отправьте запрос на добавление вашего сайта.

Публикуйте свои слайды

Когда вы будете готовы поделиться своей презентацией, зафиксируйте ее или объедините с main , и ваш контент на страницах GitHub автоматически обновится.

?

Ура!