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.

 

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:

Reveal.js example

 

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-stopped

Praxis-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.