Reveal.js: Schluss mit PowerPoint – Präsentationen als Code
Klassische Präsentationswerkzeuge wie PowerPoint oder Keynote stoßen in technischen Schulungen schnell an ihre Grenzen. Code-Snippets verlieren ihre Formatierung, Versionierung über Git ist mit Binärdateien ein Albtraum und das Layout zerschießt sich gerne auf fremden Rechnern. Die Lösung: Reveal.js, das quelloffene HTML-Präsentations-Framework.
Warum Reveal.js für Trainer & Entwickler unschlagbar ist
Reveal.js transformiert HTML- und Markdown-Dateien in interaktive, gestochen scharfe Präsentationen, die in jedem modernen Webbrowser laufen – plattformunabhängig und ohne proprietäre Software.
- Präsentationen im Git-Repository: Folien liegen als reine Textdateien (HTML oder Markdown) vor. Änderungen lassen sich mit
git diffnachvollziehen, branchweise pflegen und im Team kollaborativ weiterentwickeln. - Echtes Syntax-Highlighting: Code-Blöcke werden nicht als statische Screenshots eingebunden, sondern mit echten Themes, Zeilennummern und schrittweisem Zeilen-Highlighting (
highlight-lines) gerendert. - 2D-Navigation (Grid-Layout): Neben der horizontalen Hauptnavigation lassen sich vertikale Unterkapitel anlegen – ideal, um bei Fragen tiefer in Detailthemen einzutauchen, ohne den roten Faden zu verlieren.
- Integrierte Speaker-View: Ein Druck auf die Taste S öffnet eine vollwertige Referentenansicht mit aktuellen Folien, Vorschau auf die nächste Folie, Notizen und Präsentations-Timer.
- PDF-Export: Handouts lassen sich über die integrierte Druckfunktion direkt als saubere PDF-Dokumente exportieren.
Minimalbeispiel: Präsentieren mit reinem Markdown
Reveal.js erlaubt es, komplette Foliensätze ausschließlich in Markdown zu verfassen. Horizontale Folien werden mit --- und vertikale Detailfolien mit -- getrennt:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/reveal.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/theme/black.min.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-markdown data-separator="^---" data-separator-vertical="^--">
<textarea data-template>
# IT-Architektur Workshop
Moderne Infrastrukturen verständlich erklärt
---
## Modul 1: Container-Sicherheit
* Least Privilege
* Rootless Pods
* Network Policies
--
### Detail: Network Policies
Standardmäßig dürfen alle Pods miteinander kommunizieren!
---
## Modul 2: Deployment
`docker compose up -d`
</textarea>
</section>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/reveal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/plugin/markdown/markdown.min.js"></script>
<script>
Reveal.initialize({
plugins: [ RevealMarkdown ]
});
</script>
</body>
</html>Praxis-Tipp: Schlanke Kiosk- & Info-Screen-Lösungen
Reveal.js eignet sich nicht nur für klassische Vorträge, sondern lässt sich mit wenigen Zeilen JavaScript auch hervorragend als Digital-Signage- oder Kiosk-System zweckentfremden – beispielsweise für Empfangsbildschirme in unseren Schulungsräumen:
- Auto-Slide & Loop: Über einfache Konfigurationsparameter (
autoSlide: 8000,loop: true) rotiert die Anzeige vollautomatisch durch aktuelle Infos, Agenda-Punkte oder Raumbelegungen. - Dynamische Inhalte & QR-Codes: Da es sich um reines HTML/JS handelt, lassen sich Gast-WLAN-Zugangsdaten inklusive scanbarem QR-Code, lokale Wetter-Widgets oder Live-Daten problemlos direkt in die Folien einbinden.
- Ressourcenschonend: Ein einfacher Raspberry Pi oder Mini-PC im Browser-Kiosk-Modus (Vollbild) genügt, um eine moderne, gestochen scharfe Info-Anzeige ohne teure Spezialsoftware zu betreiben.
Self-Hosting & CI/CD-Pipelines
Da Reveal.js aus statischen Web-Assets besteht, ist das Hosting extrem unkompliziert. Ein einfacher Nginx-Container oder GitLab/GitHub Pages genügen:
services:
slides:
image: nginx:alpine
volumes:
- ./dist:/usr/share/nginx/html:ro
ports:
- "8080:80"
restart: unless-stoppedPraxis-Tipp: In Kombination mit Tools wie HedgeDoc oder statischen Generatoren lässt sich der Folien-Workflow komplett automatisieren: Markdown schreiben, per Git pushen und die fertige Präsentation steht sekundenschnell online zur Verfügung.
Fazit
Reveal.js ist das Schweizer Taschenmesser für alle, die technische Inhalte modern und interaktiv präsentieren möchten. Die Trennung von Inhalt und Design, native Code-Unterstützung und die perfekte Integration in Versionskontrollsysteme machen es zum Standard-Werkzeug für zeitgemäße Schulungen und Vorträge.
- Projektseite: revealjs.com
- GitHub: github.com/hakimel/reveal.js
When you subscribe to the blog, we will send you an e-mail when there are new updates on the site so you wouldn't miss them.
Comments