Sexy Präsentations-Folien aus reinem Text erzeugen mit Markdown, Pandoc und CSS

TAGS: pdf, Präsentationen, pandoc, HTML5, Text, FOSS, Javascript, kommandozeile, CSS, Markdown

Art des Beitrags: Workshop
Dauer: 120 Minuten
Maximale Anzahl von Teilnehmern: 10

Inhalt


Jeder Entwickler oder Committer steht (gelegentlich oder häufig) vor der Aufgabe, einen Vortrag oder eine Präsentation zu halten.

Aber wie die zugehörigen Folien möglichst "sexy" gestalten? Und dabei möglichst wenig Aufwand haben?

Viele kennen schon «Prezi» – ein zwar plattform-unabhängiges, jedoch proprietäres und cloud-basiertes Programm, mit welchem man gut aussehende Präsentationen in Flash schreiben kann. Die Ergebnisse sind oft ein Augenschmaus -- aber der Aufwand hierfür ist erheblich...

Wer jedoch kennt «Reveal.js« oder «Impress.js»? Das ist Freie Software, die mittels HTML5, CSS und Javascript ähnlich gute Ergebnisse wie Prezi erreicht.

Muss man also Web-Programmierer sein, um sexy Folien mit Freier Software zu erzeugen?

Nein! Es reicht, reinen Text zu schreiben und dabei eine minimale Formatierung vorzunehmen. Das Kommandozeilen-Tool pandoc konvertiert den Text dann in wirklich schöne HTML-Präsentationen -– mit Reveal.js (Beispiel-Folien) und Impress.js (Beispiel-Folien) sogar mit 3D-Effekten!


Auch andere und einfachere, aber ebenfalls nett anzusehende und ordentliche HTML-basierte Präsentations-Formate kann pandoc aus denselben Quell-Texten erzeugen: S5 (Beispiel-Folien) , Slidy (Beispiel-Folien), Slideous (Beispiel-Folien) und DZSlides (Beispiel-Folien) -- ebenso wie das PDF-basierte Beamer-Format (Beispiel-Folien) .

Das Text-Format, in dem man das Ausgangsformat seiner Präsentation schreibt, heisst Markdown. Markdown ist ein dermaßen einfaches Textauszeichnungsformat dass man bei Kenntnis von 2 (ja zwei!) einfachen Regeln bereits eine ansprechende Präsentation zustande bringt:

  1. Eine Überschrift leitet man ein mittels eines Hash-Zeichens: # Überschrift
  2. Einen neuen Text-Absatz trennt man vom vorhergehenden durch eine Leerzeile.

Eine solche Überschrift leitet zugleich auch eine neue Folie ein. (Überschiften 2. Ordnung leitet man mit einem doppelten Hash-Zeichen ein: ## Überschrift 2. Ordnung. Diese Überschriften starten i.d.R. keine neue Folie.)

Weitere 9, fast ebenso einfache Regeln erlauben die Verwendung folgender Stil-Elemente:

  1. Nummerierte Aufzählungen (wie diese hier)
    • verschachtelte Aufzählungen (wie diese hier)
    • (ich bin mir nicht sicher, ob ich dies nicht besser als 10. Regel deklarieren sollte)
  2. Un-nummerierte Aufzählungen
  3. Code-Beispiele: ls -l zählt die vorhandenen Dateien auf
  4. kursiv hervorgehobene Wörter
  5. fett hervorgehobene Wörter
  6. fett+kursiv hervorgehobene Wörter
  7. Hyper-Links
  8. Bilder (Beispiel siehe unten)
  9. Code-Blöcke (Beispiel siehe unten)

Code-Block-Beispiel

pandoc \
     -H beamerposter.tex \
    --toc \
    --slide-level=2 \
    --to=beamer \
    --highlight-style=zenburn \
    --chapters \
    --normalize \
    --filter=pandoc-citeproc \
    --latex-engine=xelatex \
    --from=markdown+mmd_title_block+pandoc_title_block+raw_html+markdown_in_html_blocks \
    -V theme:Warsaw -V colortheme:whale  \
    --output=./../build-full/committerconf2014-pdf-syntax_beamer.pdf \
    committerconf2014-pdf-syntax.slides.mmd    

 

Bild-Beispiel

Bild-Unterschrift

Wer komplexere Formatierungen benötigt, kann innerhalb des Markdown-Quellcodes auch HTML-Schnipsel verwenden. pandoc gibt diese beim Übersetzen 1:1 in das Zielformat weiter.

Die Konvertierung des Markdown-Quelltextes in das gewünschte Präsentations-Format erfolgt durch das Kommandozeilen-Tool pandoc. (pandoc kann übrigens noch viel mehr als Präsentations-Folien erzeugen: man kann es auch zur Erstellung "ausgewachsener" Dokumente verwenden, die viele hundert Seiten umfassen. Dabei stehen eine ganze Reihe unterschiedlicher Ziel-Formate zur Wahl: erwähnt seien hier nur Open/LibreOffice ODT, MS Word DOCX, LaTeX, DocBook, HTML, PDF, EPUB, EPUB3, ConTeXt und MediaWiki.)

Das endgültige Aussehen der Folien lässt sich dadurch beeinflussen, dass man eigene CSS-Dateien einbindet. Ansonsten erhält man Folien mit den jeweils vor-eingestellten Stilen. Beim Bau eigener CSS-Stile sind einem versierten Anwender so gut wie keine Grenzen gesetzt.

Der Workshop gliedert sich in mehrere Teile:

  1. Einrichten der Erstell-Umgebung: Installation der neuesten Versionen von pandoc, impressjs und revealjs aus den entsprechenden Quellen
  2. Kurz-Vorstellung der Markdown-Syntax
  3. Kurz-Vorstellung von pandoc
  4. Besprechung des verwendeten Makefile
  5. Erstellung eigener Präsentationen mit ca. 3-5 Folien

Die Workshop-Teilnehmer erhalten Zugriff auf ein Zip-Archiv mit folgendem Inhalt:

  • Die in diesen Workshop verwendeten Vortrags-Präsentationen.
  • Zwei (oder mehr) Papers, welche der Autor über das Pandoc + Markdown-Duo geschrieben hat.
  • Eine Reihe von Markdown-Dateien, die als Ausgangspunkt der Beispiel-Präsentationen dienten.
  • Ein Makefile (funktionierend unter Mac OS X oder Linux) zum Generieren der fertigen Beispiel-Präsentationen.
  • Die für die unterschiedlichen Folien-Stile der Beispiele verwendeten CSS-Dateien.
  • Sonstige interessanten Dateien.