Skip to main content
← Back to Events & Teaching

Einleitung: Warum Markdown für Präsentationen?

Präsentationen zu erstellen ist oft ein Balanceakt zwischen Inhalt und Formatierung. Werkzeuge wie PowerPoint oder Keynote bieten mächtige visuelle Editoren, kommen aber mit einem grundlegenden Nachteil: Ihre Folien sind binäre Dateien, die sich schlecht versionieren lassen. Änderungen sind schwer nachzuvollziehen, Kollaboration erfordert das Hin- und Herschicken von Dateien, und der Übergang zwischen verschiedenen Betriebssystemen führt oft zu Formatierungsproblemen.

Marp (Markdown Presentation Ecosystem) bricht mit diesem Paradigma. Es ermöglicht das Erstellen von Präsentationen in Markdown – derselben einfachen Auszeichnungssprache, die auch für technische Dokumentation verwendet wird. Dieser Ansatz bietet entscheidende Vorteile:

  • Versionskontrolle mit Git: Änderungen sind zeilenweise nachvollziehbar, Diffs zeigen genau, was sich geändert hat, und Merge-Konflikte können wie bei jedem anderen Textdatei-Projekt gelöst werden.
  • Reproduzierbare Builds: Die Präsentation wird deterministisch aus dem Markdown generiert, keine "versteckten" Formatierungen oder Abhängigkeiten von spezifischen Software-Versionen.
  • VS Code-Integration: Entwickler können ihre gewohnte Editor-Umgebung nutzen, mit Syntax-Highlighting, Autovervollständigung und allen anderen Features ihres Editors.
  • Trennung von Inhalt und Design: Markdown definiert die Struktur und den Inhalt, Themes kümmern sich um das visuelle Erscheinungsbild.

Marp ist besonders für technische Präsentationen geeignet: Code-Beispiele lassen sich mit Syntax-Highlighting einbinden, Diagramme werden aus Markdown-Notation generiert, und der Workflow integriert sich nahtlos in bestehende Entwicklungsprozesse.

Installation

Marp kann auf zwei Wegen verwendet werden: als VS Code Extension für interaktives Erstellen oder als CLI-Tool für automatisierte Builds.

VS Code Extension

Für die interaktive Entwicklung ist die VS Code Extension der empfohlene Einstieg:

  1. Öffnen Sie VS Code und navigieren Sie zu den Extensions (Strg+Shift+X).
  2. Suchen Sie nach "Marp for VS Code".
  3. Installieren Sie die Extension von Marp Team.

Nach der Installation können Sie Markdown-Dateien mit Marp-Syntax live in der Vorschau betrachten. Öffnen Sie die Vorschau mit dem Befehl "Marp: Open Preview" (Strg+Shift+V oder Cmd+Shift+V auf macOS) oder klicken Sie auf das Vorschau-Icon in der rechten oberen Ecke.

Marp CLI

Für die Integration in CI/CD-Pipelines oder Batch-Export ist die CLI nützlich:

npm install -g @marp-team/marp-cli

Die CLI ermöglicht das Exportieren von Markdown-Dateien in verschiedene Formate ohne den Umweg über VS Code. Sie lässt sich auch lokal in einem Projekt installieren:

npm install --save-dev @marp-team/marp-cli

Dies ist besonders nützlich, wenn die Präsentation Teil eines Repository ist und reproduzierbare Builds benötigt werden.

Erste Präsentation

Eine minimale Marp-Präsentation besteht aus YAML-Frontmatter und Inhalt, der durch horizontale Linien in Folien unterteilt wird:

---
marp: true
title: Meine erste Präsentation
theme: default
paginate: true
---

# Willkommen bei Marp

Dies ist meine erste Folie, erstellt mit Marp.

---

# Zweite Folie

Marp macht das Erstellen von Präsentationen einfach und reproduzierbar.

Die erste Zeile marp: true aktiviert die Marp-Verarbeitung. Die nachfolgenden Metadaten steuern die Präsentation:

  • title: Der Titel der Präsentation.
  • theme: Das verwendete Theme (default, uncover, gaia oder ein eigenes Theme).
  • paginate: true: Zeigt eine Seitenzahl auf jeder Folie an.

Neue Folien werden durch eine horizontale Trennlinie (---) erstellt. Innerhalb einer Folie funktioniert jede Markdown-Syntax: Überschriften, Listen, Fettung, Code-Blöcke und mehr.

Ein komplettes Beispiel

Hier ist eine umfassendere Präsentation, die die wichtigsten Features zeigt:

---
marp: true
title: "Einführung in Marp"
theme: gaia
paginate: true
---

# Einführung in Marp

Ein Markdown-basiertes Präsentationstool für Entwickler.

---

## Warum Marp?

- **Versionskontrolle:** Git-freundlich
- **Reproduzierbar:** Deterministische Builds
- **Editor-Integration:** Nutzt VS Code oder jeden Markdown-Editor
- **Themes:** Professionelles Design ohne manuelle Formatierung

---

## Code-Beispiel

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));
```

Syntax-Highlighting funktioniert automatisch.

---

<!-- _class: lead -->

## Highlights

Spezielle Folien-Layouts über Direktiven.

Themes

Marp bringt drei integrierte Themes mit, die unterschiedliche visuelle Stile bieten.

Built-in Themes

  • default: Ein klassisches, minimalistisches Theme mit klarem Fokus auf den Inhalt. Geeignet für technische Präsentationen und Vorträge, bei denen der Inhalt im Vordergrund steht.

  • uncover: Ein schlichtes Theme, das Elemente Folie für Folie enthüllt. Besonders nützlich für schrittweise Erklärungen, bei denen Sie den Zuhörern nicht den gesamten Inhalt auf einmal präsentieren möchten.

  • gaia: Ein modernes Theme mit lebendigen Farben und dynamischem Layout. Ideal für präsentationslastige Vorträge und Talks, bei denen visuelle Attraktivität wichtig ist.

Ein Theme wird im YAML-Frontmatter angegeben:

---
marp: true
theme: gaia
---

Eigene Themes erstellen

Für spezifische Anforderungen können Sie eigene Themes erstellen. Marp-Themes basieren auf CSS und verwenden CSS Custom Properties für die Anpassung:

/* theme.css */
@theme gaia;

:root {
  --color-background: #1a1a1a;
  --color-foreground: #ffffff;
  --color-accent: #00ff88;
}

section {
  background: var(--color-background);
  color: var(--color-foreground);
}

h1 {
  color: var(--color-accent);
}

Ein eigenes Theme kann dann referenziert werden:

---
marp: true
theme: ./theme.css
---

Direktiven

Marp-Direktiven sind HTML-Kommentare, die das Verhalten einzelner Folien steuern. Sie bieten feinkörnige Kontrolle ohne den Markdown-Flow zu unterbrechen.

Folien-Klassen

Direktiven können Klassen zu Folien hinzufügen, um das Layout zu ändern:

<!-- _class: lead -->

# Überschrift

Diese Folie nutzt das "lead"-Layout für großen, zentrierten Text.

Die lead-Klasse ist besonders nützlich für Titelseiten oder wichtige Übergänge, bei denen Sie den Fokus auf eine kurze Nachricht legen möchten.

Paginierung steuern

Die Paginierung kann Folie für Folie ein- oder ausgeschaltet werden:

<!-- _paginate: true -->
Diese Folie zeigt eine Seitenzahl.

<!-- _paginate: false -->
Diese Folie zeigt keine Seitenzahl.

Dies ist nützlich für Titelseiten, Thank-You-Folien oder Folien, die als interaktive Übergänge dienen.

Header und Footer

Header und Footer können Folie für Folie angepasst werden:

<!-- _header: "Konferenz 2026" -->
<!-- _footer: "Tobias Weiss" -->

# Folie mit Header und Footer

Für konsistente Header und Footer kann dies auch global im Frontmatter gesetzt werden:

---
header: "Konferenz 2026"
footer: "Tobias Weiss"
---

Kombination mehrerer Direktiven

Mehrere Direktiven können kombiniert werden:

<!-- _class: lead -->
<!-- _paginate: false -->

# Titel

Keine Paginierung, aber lead-Layout.

Bilder und Diagramme

Marp macht das Einbinden von Bildern und das Erstellen von Diagrammen einfach und integriert sich nahtlos in den Markdown-Workflow.

Bilder einbinden

Bilder werden mit der Standard-Markdown-Syntax eingebunden:

![Alt-Text](bild.jpg)

Die Größe kann über das style-Attribut angepasst werden:

![Alt-Text](bild.jpg){style="width: 80%; height: auto;"}

Für präzise Kontrolle können auch spezifische Pixelwerte verwendet werden:

![Alt-Text](bild.jpg){style="width: 500px; height: 300px;"}

Mermaid-Diagramme

Marp unterstützt Mermaid, ein Markdown-basiertes Tool zur Diagrammerstellung. Diagramme werden direkt aus Markdown-Notation gerendert:

```mermaid
graph TD
    A[Start] --> B{Entscheidung}
    B -->|Ja| C[Option A]
    B -->|Nein| D[Option B]
    C --> E[Ende]
    D --> E
```

Dies ermöglicht das Erstellen von Flussdiagrammen, Sequenzdiagrammen, Gantt-Charts und mehr, ohne externe Diagramm-Tools. Da die Diagramme als Text gespeichert werden, profitieren sie ebenfalls von der Versionskontrolle.

Bilder positionieren

Marp bietet CSS-Klassen für die Positionierung:

![Links ausgerichtet](bild.jpg){.left}

![Rechts ausgerichtet](bild.jpg){.right}

![Zentriert](bild.jpg){.center}

Für komplexe Layouts können auch Grid- oder Flexbox-Konstrukte verwendet werden:

<div style="display: flex; gap: 20px;">

![Bild 1](bild1.jpg){style="flex: 1;"}
![Bild 2](bild2.jpg){style="flex: 1;"}

</div>

Export

Marp unterstützt mehrere Exportformate, je nachdem, wofür die Präsentation verwendet wird.

Export über VS Code

In VS Code können Sie Präsentationen direkt über die Vorschau exportieren:

  1. Öffnen Sie die Vorschau (Strg+Shift+V).
  2. Klicken Sie auf das Export-Symbol in der Vorschau-Leiste.
  3. Wählen Sie das gewünschte Format aus.

Die unterstützten Formate sind PDF, HTML und PPTX.

Export über CLI

Die CLI bietet mehr Kontrolle über den Export-Prozess und eignet sich für automatisierte Builds:

# PDF-Export
marp präsentation.md --pdf

# HTML-Export
marp präsentation.md --html

# PPTX-Export
marp präsentation.md --pptx

# Alle Formate gleichzeitig
marp präsentation.md --pdf --html --pptx

Für CI/CD-Pipelines ist die CLI besonders nützlich, da Präsentationen automatisch als Teil des Build-Prozesses exportiert werden können:

# Im CI-Workflow
npm install
npx marp content/teaching/marp-praesentationen.mdx --pdf --output public/marp-praesentationen.pdf

PDF-Export-Optionen

Der PDF-Export unterstützt Optionen für die Anpassung:

marp präsentation.md --pdf --allow-local-files

--allow-local-files ist wichtig, wenn Ihre Präsentation lokale Bilder referenziert. Ohne diese Option werden lokale Dateien aus Sicherheitsgründen nicht eingebunden.

Tipps und Best Practices

Erfolgreiche Marp-Workflows basieren auf Konventionen und der Integration in bestehende Entwicklungsprozesse.

Dateikonventionen

Verwenden Sie konsistente Benennungskonventionen:

content/
  teaching/
    2026-03-29-marp-praesentationen.mdx
    2026-04-15-typescript-patterns.mdx

Das Datum im Dateinamen hilft bei der chronologischen Sortierung und macht deutlich, wann die Präsentation erstellt wurde.

Git-Workflow

Behandeln Sie Präsentationen wie jeden anderen Code:

  • Committen Sie inkrementell, mit klaren Commit-Messages.
  • Nutzen Sie Feature-Branches für größere Überarbeitungen.
  • Verwenden Sie Pull Requests für Review und Kollaboration.

Ein typischer Commit könnte so aussehen:

feat: add Marp presentation introduction

- Create initial structure with title and overview slides
- Add installation instructions for VS Code and CLI
- Include code examples for basic Marp usage

Automatisierte Builds mit CI/CD

Integrieren Sie Marp in Ihre CI/CD-Pipeline, um PDFs automatisch zu generieren:

# .github/workflows/build-marp.yml
name: Build Marp Presentations

on:
  push:
    paths:
      - 'content/teaching/*.mdx'

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '20'
      - run: npm ci
      - run: npx marp content/teaching/*.mdx --pdf --output public/
      - uses: actions/upload-artifact@v3
        with:
          name: presentations
          path: public/*.pdf

Vorlagen und Snippets

Erstellen Sie Vorlagen für häufig verwendete Präsentationsstrukturen:

---
marp: true
title: "{{TITLE}}"
theme: gaia
paginate: true
---

# {{TITLE}}

{{SUBTITLE}}

---

## Agenda

- Punkt 1
- Punkt 2
- Punkt 3

---

<!-- _class: lead -->

## Vielen Dank!

Fragen?

Speichern Sie solche Vorlagen als VS Code Snippet, um sie schnell einfügen zu können.

Qualitätssicherung

Prüfen Sie Präsentationen vor dem Export:

  • Linter-Check: Nutzen Sie Markdown-Linter, um Syntaxfehler frühzeitig zu erkennen.
  • Link-Check: Prüfen Sie, ob alle referenzierten Dateien existieren.
  • Responsive Preview: Betrachten Sie die Präsentation in verschiedenen Ansichtsgrößen.

Ein einfacher Pre-Commit-Hook kann verhindern, dass fehlerhafte Präsentationen committet werden:

#!/bin/sh
# .git/hooks/pre-commit

for file in $(git diff --cached --name-only | grep '\.mdx$'); do
  npx marp "$file" --dry-run || exit 1
done

Weiterführende Ressourcen

Marp hat eine aktive Community und eine umfassende Dokumentation. Hier sind die wichtigsten Ressourcen für die weitere Vertiefung.

Offizielle Dokumentation

  • Marp Website: https://marp.app/
  • Marp CLI Dokumentation: https://github.com/marp-team/marp-cli
  • Marp for VS Code: https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode
  • Marp Core: https://github.com/marp-team/marp-core

Themes und Design

  • Marp Themes Marketplace: https://marketplace.marp.app/
  • Theme Erstellung Guide: https://github.com/marp-team/marp-core/blob/main/docs/theming-guide.md

Beispiele und Inspiration

  • Marp Showcase: https://marp.app/showcase
  • GitHub Examples: Suchen Sie nach "marp" auf GitHub für Community-Beispiele

Community und Support

  • GitHub Issues: https://github.com/marp-team/marp-cli/issues
  • GitHub Discussions: https://github.com/marp-team/marp/discussions
  • Twitter: @marp_app

Integrationen

  • Marp CLI mit GitHub Actions: https://github.com/marp-team/marp-action
  • Marp und Obsidian: Für den Einsatz als Notizen-Workflow

Fazit

Marp vereinfacht das Erstellen von Präsentationen für Entwickler, indem es Markdown als universelles Format nutzt. Die Integration in VS Code, die Git-freundliche Natur und die Unterstützung für Code und Diagramme machen es zum idealen Tool für technische Vorträge und Dokumentationen.

Der Schlüssel zu erfolgreichen Marp-Präsentationen liegt in der Beherrschung der Basis-Direktiven, der Nutzung von Themes für konsistentes Design und der Integration in bestehende Entwicklungsworkflows. Mit der CLI und CI/CD-Integration wird Marp zu einem professionellen Werkzeug für reproduzierbare Präsentations-Builds.

Beginnen Sie mit einem einfachen Beispiel, experimentieren Sie mit Themes und Direktiven, und integrieren Sie Marp in Ihren täglichen Workflow. Die Kurve ist flach, der ROI ist hoch, und die Vorteile für Versionskontrolle und Kollaboration sind unmittelbar spürbar.