Präsentationen mit Markdown erstellen

  Ralf Hersel   Lesezeit: 4 Minuten  🗪 3 Kommentare

Mit Pandoc aus Markdown eine HTML-Slide Show generieren.

präsentationen mit markdown erstellen

Präsentationen in Powerpoint oder LibreOffice Impress zu erstellen, gehört seit langem nicht mehr zum guten Ton. Wer etwas zu sagen hat, soll sich vor sein Publikum stellen und frei sprechen. So wahr diese These ist, so wenige halten sich daran. Stattdessen klammert man sich bei Vorträgen an seine Folien. Dabei muss man seinen Vortrag nicht mit den gängigen Präsentationsprogrammen erstellen, sondern kann auch auf Markdown zurückgreifen.

Dabei wird der gesamte Inhalt der Präsentation in einer Markdown-Datei geschrieben und anschliessend ins HTML-Format umgewandelt. Dafür stehen eine Vielzahl von Werkzeugen zur Verfügung; manche sind einfach zu bedienen, andere eher umständlich. Auch die Qualität der Präsentation hängt von der verwendeten Werkzeugkette ab.

Damit dieser Artikel nicht zu lang wird, habe ich mich für eine sehr einfache Variante entschieden, gebe aber auch einen Hinweis auf eine aufwändigere Option. Viele von euch kennen das Schweizer Taschenmesser unter den Textkonvertierungstools: Pandoc. Die meisten Anwenderinnen und Anwender haben Pandoc bereits auf ihren Rechnern installiert, weil man es häufig benötigt, um Texte von einem zum anderen Format umzuwandeln. Falls das nicht so ist, lässt sich das Werkzeug aus allen Standardrepositories installieren, z.B. mit sudo apt install pandoc.

Aus diesem einfachen Markdown-Dokument (demo.md) soll eine Präsentation entstehen:

---
title: Demo
author: Ralf Hersel
date: 05.10.2021
---
# Erste Folie
Text auf der ersten Folie.
## Abschnitt 1 - Kapitel 1
- Eins
  1. Einseins
  1. Einszwei
- Zwei
## Abschnitt 1 - Kapitel 2
- Eins
- Zwei
# Abschnitt 2
## Abschnitt 2 - Kapitel 1
- Eins
- Zwei
-----------------
## Zweite Folie
- Eins
- Zwei

Mit folgendem Befehl erzeugt Pandoc daraus eine HTML Slide Show unter Verwendung des Slidy-Templates:

pandoc -t slidy -s demo.md -o demo.html

Nun kann man die Datei demo.html im Webbrowser öffnen, wobei diese Steuerbefehle zur Verfügung stehen:

  • Nächste Folie: Mausklick, Leertaste, links wischen
  • Vor und zurück: Cursor links/rechts, Seite hoch/runter, links/rechts wischen
  • Zur ersten/letzten Folie: Home, End
  • Inhaltsverzeichnis: C
  • Fullscreen: F11
  • Fusszeile an/aus: F
  • Aktuelle/Alle Folien: A
  • Grösser/Kleiner: B/S, </>, +/-

Weitere Einstellungen und Beispiele findet man unter den Quellen.

Zum Schluss noch der Hinweis auf die mächtigere Variante. Dabei handelt es sich um ein Hugo-Theme für Präsentationen: hugo-webslides. Voraussetzung für dessen Einsatz ist ein Grundverständnis des Static Site Generators Hugo.

Quellen:

https://garrettgman.github.io/rmarkdown/slidy_presentation_format.html

http://www.allgoodbits.org/articles/view/37

https://www.w3.org/Talks/Tools/Slidy2/#(1)

https://pandoc.org/MANUAL.html#slide-shows

Tags

Pandoc, HTML, erstellen, HTML-Format, Präsentation, Markdown, Hugo, Vortrag

kamome
Geschrieben von kamome am 5. Oktober 2021 um 22:54

Danke, mit slidy hatte ich bisher noch nicht gearbeitet – eine ziemlich schlanke Lösung (kaum CSS), kann man gut anpassen (JS etwas mehr, aber nichts im Vergleich zu „modernen“ Sachen (80 KB), das nimmt man vermutlich am besten so, wie es ist). Und mit nötigen Leerzeilen im Quellcode (um die Blockelemente) funktioniert sogar die Umwandlung mit pandoc wie gezeigt ;)

Rolf
Geschrieben von Rolf am 6. Oktober 2021 um 15:13

"Präsentationen in Powerpoint oder LibreOffice Impress zu erstellen, gehört seit langem nicht mehr zum guten Ton. Wer etwas zu sagen hat, soll sich vor sein Publikum stellen und frei sprechen."

Eine steile These, vor allem, wenn die Ersatz-Präsentation aus der Markdown-Quelle dann ein seit Urzeiten verpöntes Slideument mit Bulletpointliste ist. Es spricht m.E. rein gar nichts gegen visuals, die die Präsentation unterstützen - ganz besonders, wenn man eben keine Bleiwüste dazu generiert, sondern sich etwas gestalterische Mühe gibt.

tuxnix
Geschrieben von tuxnix am 7. Oktober 2021 um 01:54

Der These möchte ich voll und ganz zustimmen. Didaktisch sind Präsentationen nicht besonders wertvoll.

Deine tollen Tipps werde ich mir alle nochmal ansehen. Ersteinmal hier meine bisherige Vorgehensweise:

Ich empfehle ReText als Mardown Editor. Vor allem weil er Tabs und einen Dateibrowser mitbringt und somit auch für eine Desktop-Wiki bzw. einen Zettelkasten bestens geeignet ist ohne Zusätze in die Markdown Dateien zu schreiben.

Zusätzlich hab ich ein script geschrieben. Es ist noch Version 0.1 spontan entstanden und noch verbesserungswürdig aber für meine Zwecke langt es derzeit.

Statt nur vorwärts und rückwärts kann man damit im Browser wie in einer Wiki den Links thematisch folgen. Wenn man die Markdown-Dateien an den gewünschten Stellen untereinander verlinkt sind damit automatisch auch die html-Dateien untereinander verlinkt.

#!/bin/bash
# Was soll das script leisten:

#1. Für jede md Datei auch eine html Dateie erstellen. (markdown-Befehl)
#2. Die Links in den md-Dateien die dafür sorgen, dass sich das passende Dokument im ReText Editor auf Kllck öffnet so umschreiben, dass dies mit den html Dateien im Browser genauso geschieht.
#3. Einen Index erstellen, für alle html und md Dateien. Ist vor allem gut um damit zu Arbeiten. Wenn man in der html Datei sieht, das was ergänzt werden muss kann man so die passende md Datei schnell ansteuern. Für eine Präsentation kann man den Index auch noch etwas hübscher gestalten. 

Projekt=/NAS/matthias/Notizen/DPD

find $Projekt -name \*.html  -type f -exec rm {} \;

for i in `find $Projekt -name \*.md -type f`; do

    markdown $i > $i.h
    sed -e 's!\.md">!\.html">!g' $i.h > $i.html
    echo "<br><br><a href=$Projekt/index.html>Index</a>" >> $i.html

    mv `echo $i.html` `echo $i.html | sed -e "s!\.md\.html!\.html!g"`
    rm $i.h
done

echo "<table border="1"><thead><tr><th>Link</th><th>Bearbeiten</th></tr></thead><tbody>" >> index

for i in `find $Projekt -name \*.md -type f`; do
echo "<tr><td><a href=$i.html>$i.html</a></td><td><a href=$i>$i</a></td></tr>" >> index
done
echo "</tfoot></table>" >> index

sed -e 's!\.md\.html!\.html!g' index > index.html

rm index