Wie Sie Ihre Präsentationen in Markdown mit Slidev programmieren

Das Erstellen von Präsentationen sollte sich nicht wie ein Kontextwechsel von Ihrem Entwicklungs-Workflow anfühlen. Dennoch zwingen traditionelle Tools Sie in Drag-and-Drop-Oberflächen, proprietäre Formate und Versionskontroll-Albträume. Slidev bietet einen anderen Ansatz: Markdown-basierte Folien, unterstützt durch dieselben Frontend-Tools, die Sie bereits verwenden.

Dieser Artikel behandelt den grundlegenden Slidev-Präsentations-Workflow – vom Erstellen bis zum Export – und erklärt, warum es Entwickler anspricht, die ihre Folien unter Versionskontrolle haben möchten.

Was Slidev von anderen Präsentationstools unterscheidet

Slidev ist nicht nur ein Foliengenerator. Es ist eine Vite-basierte Vue 3-Anwendung, die Markdown als primäres Eingabeformat behandelt. Diese Unterscheidung ist wichtig, weil Sie die volle Leistung moderner Frontend-Tools erhalten: Hot Module Replacement während der Entwicklung, komponentenbasierte Architektur und ein Plugin-Ökosystem.

Im Gegensatz zu PowerPoint oder Google Slides existiert Ihre Präsentation als reine Textdateien. Im Gegensatz zu älteren Tools wie Reveal.js integriert sich Slidev direkt in das Vue-Ökosystem. Sie können Vue-Komponenten in Ihr Markdown einfügen, wenn Sie Interaktivität benötigen, die über statische Folien hinausgeht.

Das Ergebnis sind Präsentationen, die sich für Frontend-Entwickler natürlich anfühlen. Ihr vorhandenes Wissen über CSS, JavaScript und Komponentenarchitektur lässt sich direkt übertragen.

Der grundlegende Slidev-Präsentations-Workflow

Folien in Markdown erstellen

Ein Slidev-Projekt basiert auf einer slides.md-Datei. Jede Folie wird mit --- getrennt, und Sie konfigurieren einzelne Folien oder das gesamte Deck über YAML-Frontmatter.

---
theme: default
---

# Welcome

Your first slide content here.

---

# Second Slide

- Bullet points work as expected
- So does **bold** and *italic* text

Standard-Markdown-Syntax verarbeitet die meisten Inhalte: Überschriften, Listen, Links und Bilder. Codeblöcke erhalten automatisch Syntax-Highlighting. Wenn Sie etwas benötigen, das Markdown nicht ausdrücken kann, schreiben Sie HTML oder Vue-Komponenten inline.

Den Entwicklungsserver starten

Die CLI startet einen lokalen Entwicklungsserver mit Hot Reload. Bearbeiten Sie Ihre Markdown-Datei, und der Browser aktualisiert sich sofort. Eine Präsentatoransicht zeigt Ihre aktuelle Folie, die nächste Folie und Sprechernotizen, zugänglich über eine separate Präsentatoransicht-URL.

Diese enge Feedback-Schleife macht Iterationen schnell. Sie warten nicht auf Exports oder Rebuilds.

Größere Präsentationen organisieren

Teilen Sie bei umfangreichen Decks den Inhalt auf mehrere Dateien auf. Die src-Eigenschaft im Frontmatter importiert externe Markdown-Dateien:

---
src: ./slides/introduction.md
---

---
src: ./slides/main-content.md
---

Dieses Muster hält einzelne Dateien überschaubar und ermöglicht es Ihnen, Abschnitte durch Verschieben von Import-Anweisungen neu anzuordnen.

Folien mit Vue-Komponenten erweitern

Slidevs Frontend-Tooling glänzt, wenn Sie mehr als statische Inhalte benötigen. Jede Vue-Komponente funktioniert innerhalb Ihres Markdowns – ob aus dem Theme, einem Drittanbieter-Paket oder Ihrem eigenen components/-Verzeichnis.

Häufige Anwendungsfälle umfassen:

• Klick-Animationen: Die v-click-Direktive enthüllt Inhalte progressiv
• Diagramme: Integrierte Mermaid-Unterstützung rendert Flussdiagramme und Sequenzdiagramme aus Text
• Live-Code: Monaco-Editor-Einbettungen ermöglichen Live-Code-Bearbeitung während Präsentationen
• Benutzerdefinierte Layouts: Erstellen Sie wiederverwendbare Folienvorlagen als Vue-Komponenten

Sie sind nicht auf das beschränkt, was das Tool standardmäßig bereitstellt.

Präsentationen exportieren und teilen

Export ist ein erstklassiges Feature, kein nachträglicher Einfall. Slidev erzeugt:

• PDF: Zum Offline-Teilen oder Drucken
• PNG: Einzelne Folienbilder
• PPTX: Wenn jemand auf PowerPoint besteht
• SPA: Eine statische Single-Page-Anwendung, die Sie überall bereitstellen können

Der SPA-Export verdient besondere Aufmerksamkeit. Stellen Sie ihn auf Vercel, Netlify oder GitHub Pages bereit, und Ihre Präsentation wird zu einer teilbaren URL. Kombinieren Sie dies mit CI/CD-Pipelines, und jeder Commit in Ihr Repository erzeugt ein frisches Deployment.

Warum Frontend-Entwickler Slidev wählen

Die Attraktivität kommt auf Workflow-Ausrichtung zurück:

• Versionskontrolle: Vergleichen Sie Ihre Folien, überprüfen Sie Änderungen in Pull Requests und pflegen Sie die Historie
• Vorhandene Fähigkeiten wiederverwenden: CSS, Vue und JavaScript funktionieren genau wie erwartet
• Erweiterbarkeit: Themes und Plugins folgen npm-Konventionen
• Anpassbarkeit: Überschreiben Sie alles durch Standard-Webtechnologien

Wenn Sie mit Markdown und modernem JavaScript-Tooling vertraut sind, beseitigt Slidev Reibung, anstatt sie hinzuzufügen.

Erste Schritte

Initialisieren Sie ein neues Projekt über die Slidev-CLI mit Ihrem bevorzugten Paketmanager:

npm init slidev@latest

Das generierte Projekt enthält Beispielfolien, die Kernfunktionen demonstrieren. Ersetzen Sie von dort aus den Beispielinhalt durch Ihren eigenen und starten Sie den Entwicklungsserver.

Die offizielle Dokumentation behandelt Syntaxdetails, Theme-Installation und erweiterte Konfiguration. Beginnen Sie einfach – Markdown-Inhalt mit Standard-Styling – und fügen Sie dann nach Bedarf Komponenten und Anpassungen hinzu.

Fazit

Slidev verwandelt Präsentationen in einen wartbaren, Code-first-Workflow. Indem es Folien als Markdown-Dateien behandelt, die von Vue und Vite unterstützt werden, richtet es sich danach aus, wie Frontend-Entwickler bereits arbeiten. Versionskontrolle wird natürlich, Anpassung verwendet vertraute Webtechnologien, und Exportoptionen decken jedes Sharing-Szenario ab. Ihre Folien verdienen dasselbe Tooling wie Ihre Anwendungen.

Häufig gestellte Fragen

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.