slides2pages

Déployer Marp sur les pages GitHub

Présentations sur des pages Web : instantanément !

Quoi?

Marp vous permet de créer des diapositives HTML à partir de démarques (comme ça !).

Cette présentation est à la fois un site Web et un README.md.

Pourquoi?

Traitez votre présentation de la même manière que vous traitez le code.

• Utilisez git pour suivre les modifications
• Pull request pour collaborer
• Déployer automatiquement
• Vous voyez un problème ? Ouvrez un problème !

Installation

Vous voulez créer le vôtre ?

Tout d’abord, créez un nouveau dépôt à partir du dépôt modèle.

Configurer les pages GitHub

Ouvrez votre nouveau dépôt et configurez la publication.

Vous utiliserez généralement gh-pages comme branche de déploiement.

Examiner la version

Cliquez sur l'onglet Actions et voyez si la construction a réussi (cela peut prendre un certain temps).

Vous devriez maintenant voir les fichiers générés dans la branche gh-pages .

Afficher la page Web

Ouvrez votre page Web déployée pour voir le contenu.

Prêt à l'emploi, vous devriez voir README.md sous la forme /index.html et /README.pdf . Les diapositives sous docs/ sont également converties.

Exécution locale

• Conversion unique sans installer marp-cli

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

---

• Ou installez marp-cli dans le répertoire courant avec npm

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

• L'exécution de la commande ci-dessus crée un fichier package.json dans le répertoire courant, comme ceci

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

---

• La commande marp est désormais disponible dans le répertoire courant lorsqu'elle est préfixée par npx

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

• Et voici le résultat

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

---

• Si vous avez déjà le fichier package.json dans le répertoire actuel, exécutez-le simplement pour installer les packages spécifiés par celui-ci.

$ npm install

En tant qu'étape du flux de travail

Le workflow exécute une étape équivalente :

 - 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

Notez que les args correspondent à la diapositive précédente.

Personnalisation de la construction

Tout ce qui se trouve dans le dossier build/ sera déployé sur les pages GitHub.

Vous pouvez copier des fichiers supplémentaires ou exécuter d'autres étapes de traitement à l'aide d'autres outils.

En savoir plus sur Marp

C'est le bon moment pour en savoir plus sur Marp. Voici quelques ressources :

• Marque commune
• Aide-mémoire
• Thèmes
• Thèmes CSS
• Directives
• Plugin VSCode
• Éditeur en ligne Marp

Exemples de sites

Les sites connus utilisant cette action sont :

• Université de l'Illinois à CS 199 Even More Practice d'Urbana-Champaign (code)
• Explorer les modèles basés sur des agents (code)

Envoyez une pull request pour ajouter votre site.

Publiez vos diapositives

Lorsque vous êtes prêt à partager votre présentation, validez ou fusionnez avec main et votre contenu sur les pages GitHub sera automatiquement mis à jour.

?

Hourra!