Slidev 101: Präsentationen mit Markdown erstellen

Als Developer Advocate spreche ich häufig auf Veranstaltungen, um meine Erfahrungen weiterzugeben und andere Entwicklerinnen und Entwickler zu informieren – deshalb verbringe ich viel Zeit mit dem Erstellen von Präsentationen. Das kann mühsam sein, besonders wenn man Details wie Farbschema, visuelle Gestaltung und Storyline berücksichtigt. Nach einer Weile wollte ich eine Methode finden, bei der die Developer Experience von Anfang an Teil des Prozesses ist.

Zum Glück gibt es eine bessere, programmatischere Möglichkeit, Ihre Slides zu gestalten: Slidev, ein Open-Source-Projekt, mit dem Sie Ihre Präsentationen programmieren können.

Präsentationsprogramme im Vergleich zu programmierten Präsentationen

Ich habe Präsentationen mit Keynote, Google Slides und Slides.com erstellt und dabei einige Herausforderungen erlebt, zum Beispiel:

• Keynote ist nicht besonders portabel und erfordert, dass Sie die Slides zum Teilen als PDF exportieren.

• Google Slides eignet sich gut für die gemeinsame Bearbeitung. Die standardisierten Präsentationsvorlagen von Snyk verhindern außerdem, dass die visuelle Gestaltung zu viel Zeit in Anspruch nimmt. Allerdings fehlen Google Slides Textanimationen, mit denen sich Codeänderungen hervorragend animieren lassen. Eine weitere Herausforderung: Google Slides funktioniert nur richtig, wenn Sie online sind – und wir wissen alle, wie langsam das WLAN auf Konferenzen sein kann.

• Slides.com basiert auf dem Open-Source-Projekt Reveal.js des talentierten Hakim El Hattab. Ich mag diesen webbasierten Präsentationsdienst wegen seiner Einfachheit, aber es fehlen Designvorlagen und ich stoße oft an die Grenzen der kostenlosen Version (und gelegentlich auch der kostenpflichtigen Version).

Vor diesem Hintergrund bietet das Programmieren von Präsentationen einige Vorteile:

• Sie haben Zugriff auf eine codebasierte Versionshistorie.

• Dank des Open-Source-Charakters von GitHub lassen sich Ihre Slides ganz einfach teilen und gemeinsam mit anderen bearbeiten.

Programmieren Sie Ihre Präsentationen mit Slidev auf GitHub

Bevor ich näher auf Slidev eingehe, sei erwähnt, dass das Programmieren von Präsentations-Slides keine neue Idee ist. Patrick Debois, auch bekannt als Vater von DevOps, hat sich in einem Blogbeitrag mit diesem Konzept befasst und verschiedene Konzepte als Code analysiert. Reveal.js und MDX sind Beispiele für Projekte, die es schon lange gibt.

Beginnen wir mit einer Einführung in Slidev und seine Entstehungsgeschichte. Slidev ist ein Open-Source-Projekt auf Basis von Vue.js, das von Anthony Fu entwickelt wurde. Es soll das Erstellen von Slides vereinfachen, indem Markdown als Grundlage dient. Gleichzeitig erweitert es den Funktionsumfang und ermöglicht es Nutzerinnen und Nutzern, eigene Komponenten zu erstellen.

Erstellen Sie zunächst in einem neuen Ordner ein Slidev-Projekt:

1npm init slidev

Sie werden nach dem Titel der Slides, dem Ordnernamen und weiteren Details gefragt. Anschließend wird ein Projektgerüst mit einem einfachen Komponentenbeispiel und der Hauptdatei slides.md erstellt, die das gesamte Slide-Deck enthält.

Die Ordnerstruktur und die Datei des Slide-Decks sollten etwa so aussehen:

Sehen wir uns den Inhalt der Datei slides.md an:

• Diese Markdown-Datei enthält eine YAML-Frontmatter-Konfiguration, mit der Sie einzelne Slides oder das gesamte Slide-Deck anpassen können. Sie wird durch öffnende und schließende `---`-Zeichen eingerahmt.

• Jeder Titel in der Markdown-Datei verwendet die Notation # Title heading 1, um den Titel und die Hauptüberschrift des Slides zu kennzeichnen. Darunter steht der Inhalt.

• Weitere Anpassungen an Buttons und visuellen Elementen eines Slides werden mit HTML-Code für DOM-Elemente wie <div> und <span> vorgenommen.

Sobald die Änderungen am standardmäßigen Slide-Deck abgeschlossen sind, können wir das Slidev-Projekt im Hot-Reload-Modus starten:

1npm run dev

Dadurch wird der Inhalt automatisch in eine Webseite umgewandelt und über localhost:3030 bereitgestellt. Außerdem wird ein Browserfenster geöffnet, in dem der Inhalt wie hier dargestellt wird:

Der eigentliche Inhalt lässt sich genauso einfach schreiben wie eine README-Datei in Markdown – damit sind die meisten Entwicklerinnen und Entwickler bestens vertraut. Hier sehen Sie ein Beispiel für einen Slide mit Aufzählung:

1---
2
3# What is Slidev?
4
5Slidev is a slide deck maker and presenter designed for developers, and consists of the following features
6
7- 📝 **Text-based** - focus on the content with Markdown, and then style them later
8- 🎨 **Themable** - theme can be shared and used with npm packages
9- 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion
10- 🤹 **Interactive** - embedding Vue components to enhance your expressions
11- 🎥 **Recording** - built-in recording and camera view
12- 📤 **Portable** - export into PDF, PNGs, or even a hostable SPA
13- 🛠 **Hackable** - anything possible on a webpage
14
15<br>
16<br>
17
18Read more about [Why Slidev?](https://sli.dev/guide/why)
19
20<!--
21You can have a `style` tag in markdown to override the style for the current page.
22Learn more: https://sli.dev/guide/syntax#embedded-styles
23-->
24
25<style>
26h1 {
27  background-color: #2B90B6;
28  background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%);
29  background-size: 100%;
30  -webkit-background-clip: text;
31  -moz-background-clip: text;
32  -webkit-text-fill-color: transparent;
33  -moz-text-fill-color: transparent;
34}
35</style>

Sehen wir uns die einzelnen Bestandteile dieses Codeausschnitts an:

1. Mit --- beginnt eine neue Slide-Seite und werden die für diesen Slide erforderlichen Konfigurationen festgelegt. In diesem Fall war keine spezielle Slidev-Anpassung nötig.

2. Die Markdown-Überschrift # What is Slidev? legt den Titel des entsprechenden Slides fest.

3. Der Inhalt des Slides folgt auf den Titel und wird wie jede andere Markdown-Syntax eingegeben. Beachten Sie, dass Sie HTML-Zeilenumbrüche mit <br> sowie Emojis oder Markdown-Links am Ende des Slides einfügen können.

4. Der HTML-Kommentarblock wird nicht in den Slides angezeigt, da er für Sprechernotizen vorgesehen ist. So können Sie Ihre Gedanken direkt im Inhalt festhalten.

5. Mit dem Inline-Style-Tag wird die Überschriftengestaltung des Themes überschrieben (standardmäßig ist die Schrift weiß) und eine Verlaufsfarbe angewendet.

Hier sehen Sie einen Screenshot der gerenderten Slide-Ansicht:

Wenn Sie viel Zeit mit Quellcodeausschnitten verbringen – so wie ich, wenn ich über anfälligen Code und bewährte Sicherheitspraktiken spreche –, ist Code-Hervorhebung eine nützliche Funktion.

Sehen wir uns den folgenden Slidev-Code an:

1---
2layout: image-right
3image: https://source.unsplash.com/collection/94734566/1920x1080
4---
5
6# Code
7
8Use code snippets and get the highlighting directly![^1]
9
10ts {all|2|1-6|9|all}
11interface User {
12  id: number
13  firstName: string
14  lastName: string
15  role: string
16}
17
18function updateUser(id: number, update: User) {
19  const user = getUser(id)
20  const newUser = { ...user, ...update }
21  saveUser(id, newUser)
22}
23
24<arrow v-click="3" x1="400" y1="420" x2="230" y2="330" color="#564" width="3" arrowSize="1">
25
26[^1]: [Learn More](https://sli.dev/guide/syntax.html#line-highlighting)

Dieser Slide beginnt mit einer spezifischen Anpassung, die im öffnenden und schließenden YAML-Block --- festgelegt ist. Damit wird das Layout so konfiguriert, dass rechts ein Bild angezeigt wird, und die URL dieses Bildes wird angegeben.

Anschließend werden Titel und Inhalt des Slides beschrieben, wobei Code-Hervorhebung zum Einsatz kommt. Der Codeausschnitt reagiert auf Mausklicks und folgt diesem Animationsmuster:

1. Zunächst hebt Slidev den gesamten Codeblock hervor. Dafür sorgt die Direktive ts {all} am Anfang des Codeblocks.

2. Bei jedem Mausklick, mit dem die Slide-Animation weitergeschaltet wird, wird ein bestimmter Teil des Codes hervorgehoben: zuerst Zeile 2, dann die Zeilen 1 bis 6, danach Zeile 9 und schließlich wieder der gesamte Code.

3. Mit der Komponente <arrow> wird anschließend mithilfe von x- und y-Koordinaten auf eine Codezeile verwiesen (was, wie ich zugeben muss, nicht besonders benutzerfreundlich ist). Sie wird beim dritten Mausklick ausgelöst, wie das Attribut v-click=”3” angibt.

4. Zum Schluss enthält der Slide Fußnoten, mit denen sich Bildnachweise oder Referenzen angeben lassen.

Der folgende Screenshot zeigt den Slide in Aktion:

Zum Abschluss dieser Einführung sei daran erinnert: Da Slidev auf dem Vue.js-Framework basiert, können Sie beliebige Vue-Komponenten direkt in der Markdown-Syntax Ihrer Slides definieren und verwenden – einschließlich Komponenten aus importierten Themes. Weitere Informationen zu den Vue-Komponenten von Slidev finden Sie in der Dokumentation.

Slidev-Export, Themes und weitere Funktionen für Slide-Decks

Wir haben besprochen, wie Sie mit Slidev und Markdown loslegen können. Slidev bietet aber noch viele weitere integrierte Funktionen, die ich im Rahmen meiner Vorträge gerne erkunden möchte. Hier sind einige, auf die ich mich besonders freue.

Slidev-Themes und der Wechsel zwischen hellem und dunklem Modus

Stellen Sie sich vor, Sie verbringen viel Zeit mit dem Erstellen Ihres Slide-Decks und stellen dann fest, dass die Beleuchtung am Veranstaltungsort ganz anders ist als erwartet. Sie müssen präsentieren und wissen, dass ein großer Teil des Inhalts unleserlich ist. Das ist frustrierend.

Mit Slidev ist die Lösung ganz einfach. Über den Button Dark mode toggle in der Symbolleiste der Slides können Sie zwischen einem hellen Modus und einem dunklen Modus wechseln. So brauchen Sie sich keine Gedanken mehr über Beleuchtung und Lesbarkeit zu machen. Achten Sie darauf, dass das von Ihnen verwendete Theme diese Funktion unterstützt. Ich habe sie im Standard-Theme von Slidev und in einigen anderen Themes gefunden, die ich ausprobiert habe. Insgesamt ist es schön zu sehen, dass Theme-Designerinnen und -Designer diese Funktion in ihre Builds integrieren.

Auf der Dokumentationsseite Slidev Themes finden Sie bereits eine Auswahl kuratierter Themes. Weitere entdecken Sie, wenn Sie in der npm-Registry nach Paketen mit dem Tag slidev-theme suchen.

Mit Slidev ganz einfach im Präsentationsmodus präsentieren

Eine weitere nützliche Funktion ist ein Präsentationsmodus, den Sie über eine bestimmte URL aufrufen können. Anders als bei anderen Präsentationsprogrammen, in denen der Präsentationsmodus über den Schalter Präsentationsansicht integriert ist, kann ich den Modus bei Slidev im Browser öffnen und meine Notizen oder die nächsten Slides auf meinem Mobilgerät oder Tablet ansehen.

Slidev-Präsentation exportieren oder einfach online bereitstellen

Um Ihre Slidev-Präsentation als PDF oder PNG zu exportieren, muss sie mit Playwright gerendert werden – dabei wird im Wesentlichen ein Headless-Browser per Screenshot aufgenommen.

Das ist ziemlich einfach und viel unkomplizierter, als es zunächst klingt. Trotzdem lohnt es sich, kurz anzusehen, wie es funktioniert. Auf der Dokumentationsseite Slidev Export finden Sie alle Details, einschließlich der Optionen zum Wechsel zwischen hellem und dunklem Modus für Slides sowie zu Klickanimationen.

Ich habe darüber nachgedacht, mein Slidev-Deck folgendermaßen zu teilen:

1. Die Slides werden in einem GitHub-Repository gehostet.

2. Bei jedem Commit wird eine CI gestartet, die eine statische, live geschaltete Website erstellt und auf Vercel oder Netlify bereitstellt.

3. Dieselbe CI erstellt außerdem beim Build einen PDF-Export von Slidev, den GitHub Actions als Artefakt speichern kann. Artefakte werden allerdings nur 90 Tage lang aufbewahrt, daher brauchen wir eine andere Lösung. Eine Möglichkeit wäre, die generierte PDF-Datei in das GitHub-Repository zu committen.

Programmieren Sie Ihre Präsentationen mit Slidev

Das war’s! Vielen Dank, dass Sie meinen Weg zum Programmieren von Präsentationen mit Slidev verfolgt haben. Ich hoffe, er inspiriert Sie dazu, einen ähnlichen Ansatz auszuprobieren oder eine noch bessere Möglichkeit zu finden, programmierbare und individuell gestaltete Präsentations-Slides zu erstellen.