Markdown-Folien

Warum überhaupt Markdown für Folien?

PowerPoint und Keynote sind hervorragend im Foliendesign und schlecht in fast allem anderen. Sie sind schwer zu versionieren, schwer zu diffen, schwer auf einem Telefon zu bearbeiten, schwer teamübergreifend konsistent zu halten und unmöglich per grep zu durchsuchen. Markdown löst das „alles andere“, ohne im visuellen Design konkurrieren zu wollen, und für technische Inhalte (Codebeispiele, Terminalausgabe, Kommandozeilen-Durchläufe, Aufzählungslisten) lässt es sich schneller verfassen als jedes GUI-Werkzeug.

Das Format ist Klartext, also lebt es nativ in git, öffnet sich in jedem Editor, lässt sich in jedem Werkzeug von VS Code über vim bis zu einer Notiz-App auf dem Telefon bearbeiten und übersteht 30 Jahre Software-Wandel. Der Kompromiss: Sie geben pixelgenaue Designkontrolle auf. Für Entwickler-Vollversammlungen, Konferenzvorträge, README-Durchlauf-Decks, Unterrichtsmaterial und Lightning Talks ist das ein großartiger Tausch. Für Verkaufspräsentationen und Marketing-Decks gewinnen wahrscheinlich immer noch PowerPoint oder Figma.

Die ----Konvention

Drei Bindestriche in einer eigenen Zeile sind Markdowns vorhandene Syntax für eine horizontale Linie, schon in CommonMark definiert und im gesamten Markdown-Folien-Ökosystem als Folientrenner wiederverwendet, reveal.js, Marp, Slidev und die meisten kleineren Werkzeuge verwenden sie alle. Die Konvention ist eindeutig (eine echte horizontale Linie funktioniert weiterhin innerhalb einer einzelnen Folie; --- trennt nur, wenn es in einer eigenen Zeile steht) und leicht zu tippen. Sie schreiben das Deck als ein durchgehendes Markdown-Dokument, und das Werkzeug segmentiert es visuell neu.

Das Markdown-Folien-Ökosystem im Jahr 2026

• reveal.js (Hakim El Hattab, seit 2011), die wegweisende browserbasierte Präsentationsbibliothek. Vertikale und horizontale Folienraster, Übergänge, Sprechernotizen (Notes:-Syntax), Markdown-Quelle über das data-markdown-Attribut. Der bekannte Name; slides.com hostet sie als SaaS.
• Marp: das beliebteste dedizierte Markdown-zu-Folien-Projekt. CommonMark-basiert, wird mit einer CLI, einer VS-Code-Erweiterung und Marp Core geliefert. Hervorragender PDF-Export. Frontmatter für Theme und Seitenverhältnis.
• Slidev (Anthony Fu), neuer (2021), Vue-basiert, modern. Für Entwicklervorträge konzipiert: integrierte Code-Hervorhebung, Code-Einbettung in Folien, Referentenansicht, Zeichnen auf Folien während des Vortrags.
• remark.js (Ole Petter Bang), minimal, Einbettung in einer einzelnen Datei. Beliebt dafür, keine Vorgaben zu machen.
• HackMD: Variante mit kollaborativer Bearbeitung. Browserbasiert, Konto erforderlich, synchronisiert über Geräte hinweg.

Dieses Werkzeug füllt eine andere Nische: keine Installation, kein Konto, kein Upload. Einfügen, präsentieren, Tab schließen. Es ist die richtige Wahl, wenn Sie einen 5-minütigen Lightning Talk auf einem geliehenen Laptop vorbereiten, Folien während eines Flugs fertigstellen oder in einem Besprechungsraum entwerfen und nicht Marp hochfahren oder sich bei slides.com anmelden möchten.

Seitenverhältnisse erklärt

Moderne Folien-Decks sind standardmäßig 16:9, jeder in den letzten zehn Jahren gebaute Konferenzprojektor ist eine 16:9-Fläche, und 16:9 passt zu jedem Laptop-Bildschirm und modernen Fernseher. Der Viewport hier rendert passend dazu in 16:9. Ältere Decks verwenden 4:3 (das ursprüngliche Verhältnis eines CRT-Projektors); ältere Laptops liefern manchmal 16:10. PowerPoints Standard ist seit Version 2013 16:9; Google Slides verwendet bei der Erstellung standardmäßig 16:9; Keynotes Standard ist ebenfalls 16:9.

Häufige Anwendungsfälle

• Entwickler-Vollversammlungen und Demo-Tage. Führen Sie ein Team durch eine Codeänderung, eine neue Architektur oder eine Vorfall-Retrospektive.
• Konferenz- und Meetup-Vorträge. Besonders Vorträge für ein Tech-Publikum, bei denen das Deck Codebeispiele benötigt, die in Pull Requests sauber diffen.
• README-Durchläufe. Eine 6-Folien-Einführung in eine Bibliothek, eingebettet in die Projektdokumentation.
• Lightning Talks. 5-minütige Vorträge mit ~5 Folien, bei denen Förmlichkeit der Feind ist.
• Unterrichtsmaterial. Bearbeiten Sie Folien live während des Unterrichts; Studierende können die Markdown-Quelle für ihre Notizen kopieren.
• Interne Schulungen. Versionierte und im Code-Review geprüfte Einarbeitungs-Decks neben der Codebasis, die sie vermitteln.
• Vorbesprechungs-Briefings. 3-Folien-Vorablektüren, die als Markdown gesendet werden und die der Empfänger in seinem Editor in der Vorschau ansehen kann.

Folien-Designprinzipien, die sogar in Markdown zählen

• Eine Idee pro Folie. Die klassische Regel. Wenn eine Folie zwei Gedanken enthält, teilen Sie sie.
• Weniger Text, mehr Struktur. Wenn sich eine Folie wie ein Absatz liest, liest der Redner die Folie vor. Reduzieren Sie auf Aufzählungspunkte und lassen Sie den Redner die Prosa ergänzen.
• Größere Schriften, als Sie denken. Markdown-Folien verwenden standardmäßig Fließtext im Äquivalent von etwa 24-32 px. Alles unter ~18 px ist von der Rückseite eines Konferenzraums aus unlesbar.
• Eine H1 pro Folie. Mehrere Überschriften der obersten Ebene auf derselben Folie erzeugen visuelle Verwirrung.
• Halten Sie Codeblöcke kurz. Sechs Zeilen sind ungefähr das bequeme Maximum auf einer 16:9-Folie. Längere Snippets müssen aufgeteilt oder hervorgehoben in Abschnitten gezeigt werden.
• Lassen Sie jedes Bild seinen Platz verdienen. Stockfotos als Dekoration sind Füllmaterial. Diagramme, Screenshots und Datenvisualisierungen sind Signal.

Datenschutz

Folien-Decks sind oft vertraulich, Pitch-Decks, interne Strategie, Finanzzahlen, Produktdemos vor dem Start. Dieses Werkzeug läuft vollständig in Ihrem Browser: Das Markdown bleibt im Textfeld, das Rendern erfolgt lokal, und die Vollbildpräsentation liest aus demselben Zustand im Arbeitsspeicher. Es wird nichts hochgeladen, es ist kein Konto erforderlich, und das Schließen des Tabs löscht alles. Serverseitig gehostete Alternativen (slides.com, HackMD, GitPitch) erfordern Vertrauen in die Datenrichtlinien des Betreibers; diese hier beseitigt die Frage vollständig.

Häufige Fehler

1. Ganze Absätze auf eine Folie einfügen. Wenn das Publikum sie liest, hört es nicht dem Redner zu. Teilen Sie in Aufzählungspunkte auf.
2. Inkonsistente Überschriftenebenen. Eine Folie mit H1 betitelt, die nächste mit H2, sieht nachlässig aus. Wählen Sie eine Ebene für Folientitel und bleiben Sie dabei.
3. Codeblöcke zu lang für den Projektor. Ein 30-zeiliges Snippet ist aus der hinteren Reihe unlesbar. Zeigen Sie nur die relevanten 5-10 Zeilen, der Rest durch // ... ersetzt.
4. Keine Sprechernotizen. Die Folien sind die Gedächtnisstütze des Publikums, nicht Ihre. Sprechernotizen (in Werkzeugen, die sie unterstützen) enthalten die Gesprächspunkte.
5. Das Seitenverhältnis des Projektors vergessen. Wenn Sie auf einem 16:10-Laptop erstellt haben und der Veranstaltungsort einen 4:3-Projektor verwendet, wird Inhalt abgeschnitten.
6. Zu viele Folienübergänge. Animationen zwischen Folien wirken in einer Demo geschliffen und während eines 30-minütigen Vortrags ermüdend. Verwenden Sie standardmäßig keine Übergänge oder eine einfache Überblendung.
7. Eine raffinierte Schrift verwenden, die auf dem Rechner des Veranstaltungsorts nicht funktioniert. Bleiben Sie bei Systemschriften, serifenlos für den Fließtext, Festbreitenschrift für Code.

Weitere häufig gestellte Fragen

Kann ich die Folien als PDF exportieren?

Ja, wechseln Sie in den Vollbildmodus und verwenden Sie dann die Druckfunktion Ihres Browsers (Strg/Cmd + P) und wählen Sie Als PDF speichern. Die meisten Browser drucken die gerenderten Folien eine pro PDF-Seite. Das Ergebnis ist ein sauberes Text-PDF (kein Bild), also klein und durchsuchbar.

Was ist mit Syntaxhervorhebung für Code?

Eingezäunte Codeblöcke werden mit Festbreitenschrift und einem leicht dunklen Hintergrund dargestellt, was sie auf dem dunklen Vollbild-Theme lesbar macht. Sprachspezifische Syntaxhervorhebung (Python-Schlüsselwörter in einer Farbe, Strings in einer anderen) erfordert ein aufwendigeres Folien-Framework wie reveal.js oder Slidev. Bei einem schnellen Lightning Talk wird sie selten vermisst; für codelastige Langform-Vorträge passen jene Werkzeuge besser.

Wie bette ich ein Bild ein?

Standard-Markdown-Bildsyntax: ![alt text](https://your-image-url.png). Das Bild muss aus dem öffentlichen Web erreichbar sein (oder von Ihrem lokalen Rechner über eine file://-URL, aber file-URLs sind in manchen Browsern möglicherweise blockiert). Verwenden Sie für sensible Bilder Markdowns Link-Syntax zu einer lokalen Datei, die Sie während des Vortrags von einem winzigen lokalen Webserver ausliefern.

Funktioniert das offline?

Sobald die Seite geladen ist, ja, das Markdown-Rendern und die Foliennavigation laufen lokal. Externe Bilder werden ohne Netzwerk nicht geladen, betten Sie Bilder also als Data-URIs ein oder hosten Sie sie lokal, wenn Sie offline präsentieren werden.

Kann ich während des Vortrags die Tastatur verwenden?

Ja, Pfeiltasten / Leertaste blättern vor, die Rücktaste geht zurück, Escape verlässt den Vollbildmodus, F schaltet den Vollbildmodus um. Die meisten Präsentationsfernbedienungen (der übliche kabellose Präsenter von Logitech usw.) emulieren dieselben Pfeiltasten, sodass sie ohne Konfiguration funktionieren.

Werden Daten an einen Server gesendet?

Nein. Markdown-Rendern, Foliensegmentierung, Vollbildpräsentation, all das geschieht in Ihrem Browser. Ihr Deck-Inhalt wird serverseitig nirgendwo hochgeladen, protokolliert oder gespeichert. Das Schließen des Tabs löscht den Inhalt des Textfelds.