slides2pages

Stellen Sie Marp auf GitHub-Seiten bereit

Präsentationen auf Webseiten: Sofort!

Was?

Mit Marp können Sie HTML-Folien aus Markdown erstellen (wie hier!).

Diese Präsentation ist sowohl eine Website als auch eine README.md.

Warum?

Behandeln Sie Ihre Präsentation genauso wie Code.

• Verwenden Sie Git, um Änderungen zu verfolgen
• Pull-Anfragen zur Zusammenarbeit
• Automatisch bereitstellen
• Sehen Sie ein Problem? Eröffnen Sie ein Problem!

Aufstellen

Möchten Sie Ihr eigenes erstellen?

Erstellen Sie zunächst ein neues Repo aus dem Vorlagen-Repo.

Konfigurieren Sie GitHub-Seiten

Öffnen Sie Ihr neues Repo und richten Sie die Veröffentlichung ein.

Normalerweise verwenden Sie gh-pages als Bereitstellungszweig.

Überprüfen Sie den Build

Klicken Sie auf die Registerkarte „Aktionen“ und prüfen Sie, ob der Build erfolgreich war (dies kann einige Zeit dauern).

Sie sollten nun die generierten Dateien im Zweig gh-pages sehen.

Webseite ansehen

Öffnen Sie Ihre bereitgestellte Webseite, um den Inhalt anzuzeigen.

Standardmäßig sollten Sie README.md als /index.html und /README.pdf sehen. Folien unter docs/ werden ebenfalls konvertiert.

Läuft lokal

• One-Shot-Konvertierung ohne Installation von marp-cli

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

---

• Oder installieren Sie marp-cli im aktuellen Verzeichnis mit npm

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

• Durch Ausführen des obigen Befehls wird eine package.json Datei im aktuellen Verzeichnis erstellt, etwa so

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

---

• Jetzt ist der Befehl marp im aktuellen Verzeichnis verfügbar, wenn ihm npx vorangestellt wird

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

• Und hier ist die Ausgabe

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

---

• Wenn Sie die Datei package.json bereits im aktuellen Verzeichnis haben, führen Sie diese einfach aus, um die darin angegebenen Pakete zu installieren.

$ npm install

Als Workflow-Schritt

Der Workflow führt einen äquivalenten Schritt aus:

 - 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

Beachten Sie, dass die args mit der vorherigen Folie übereinstimmen.

Anpassen des Builds

Alles im Ordner build/ wird auf GitHub-Seiten bereitgestellt.

Sie können zusätzliche Dateien kopieren oder weitere Verarbeitungsschritte mit anderen Tools ausführen.

Erfahren Sie mehr über Marp

Dies ist ein guter Zeitpunkt, um mehr über Marp zu erfahren. Hier sind einige Ressourcen:

• CommonMark
• Spickzettel
• Themen
• CSS-Themen
• Richtlinien
• VS-Code-Plugin
• Marp Online-Editor

Beispielseiten

Bekannte Websites, die diese Aktion verwenden, sind:

• University of Illinois at Urbana-Champaign's CS 199 Even More Practice (Code)
• Erkunden agentenbasierter Modelle (Code)

Senden Sie eine Pull-Anfrage, um Ihre Website hinzuzufügen.

Veröffentlichen Sie Ihre Folien

Wenn Sie bereit sind, Ihre Präsentation zu teilen, übertragen Sie sie auf main oder führen Sie sie zusammen. Ihre Inhalte auf GitHub Pages werden dann automatisch aktualisiert.

?

Hurra!