Dritter Advent 2020 – Inhalte verfassen in reveal.js

Titelbild Advent 3

Hinweis: Die Inhalte kommen von der Docker-Site und wurden der Dokumentation entnommen. 

Heute widmen wir uns den Inhalten unserer Präsentation. Den Inhalt einer Folie definierst du in einer sogenannten section. Standardmäßig wird er in HTML erfasst. Dies kann aber schnell unübersichtlich werden, wenn man die Inhalte „inline“ definiert. Deshalb gehen wir hier einen anderen Weg und lagern unsere Inhalte in Markdown-Dateien aus. 

Du kennst Markdown noch nicht? Hier findest du die wichtigsten Informationen dazu. 

 

Es ist entscheidend, dass reveal.js den Inhalt einer Markdown-Datei richtig interpretieren kann. Damit das gelingt, solltest du dem Framework vier Dinge mitteilen: 

 

1.       Wo in dieser Datei fängt eine section an?

2.       Wo in dieser Datei endet eine section?

3.       Wie sind die sections angeordnet?

4.       Welche zusätzlichen Attribute sind vorhanden?

 

Wir legen fest: um einen horizontalen Umbruch zu erzeugen, schreiben wir in der Markdown-Datei eine Leerzeile, drei Striche (—) und danach wieder eine Leerzeile. Schreiben wir hingegen eine Leerzeile, zwei Striche (–) und danach wieder eine Leerzeile, erzeugen wir einen vertikalen Umbruch. 

 

Für jede horizontal angeordnete Folie (section) definieren wir eine Markdown-Datei. Somit müssen wir in den Markdown-Dateien nicht den Marker für den horizontalen Umbruch benutzen. 

 

In allen Markdown-Dateien definieren wir die section selbst – und bei Bedarf auch die zugehörigen vertikalen sections. Die Markdown-Dateien legen wir im Ordner assets, und dort im Unterordner md ab. 

 

Wie du all das nachvollziehen kannst, will ich dir anhand eines Beispiels erklären. Lass uns nur noch eben dafür sorgen, dass reveal.js die Texte nicht mittig, sondern weiter oben platziert. Hierfür ergänzen wir in der Datei index.html die initialize-Methode, sodass sie so aussieht: 

Bild von Code

Damit der Text links ausgerichtet erscheint, fügen wir in der Datei app.css Folgendes ein:

Bild von Code

Umstellung der section "manage"

Im Ordner md legen wir eine Markdown-Datei mit dem Namen manage.md an. Der Inhalt dieser Datei ist schnell erstellt. Neben einer kurzen Erläuterung des jeweiligen Docker-Befehls zeige ich dir gleich einige Beispiele. Sowohl der Befehl als auch die Bespiele sind sofort als Code zu erkennen. Die Beispiele werden Zeile für Zeile hervorgehoben („highlighted“), während der Benutzer „blättert“. So erkennt das Publikum sofort, welches Beispiel gerade besprochen wird. Zudem werden die Zeilen durchnummeriert.

Bild von Code

Obiges Bespiel zeigt das Build-Kommando, andere Kommandos werden analog gestaltet. Die Zeilen 5, 19 und 23 zeigen den vertikalen Umbruch. 

In der Datei index.html ändern wir die section:

Bild von Code

Nun teilen wir der section zusätzlich zu den bisherigen Attributen zwei Dinge mit: zum einen den Pfad zur Markdown-Datei, zum anderen die Marker für die Umbrüche. 

Schon haben wir die Umstellung der section abgehakt. Alle anderen sections werden analog umgestellt.  

Ist alles glatt gelaufen, sollte die Ansicht für das Kommando jetzt so aussehen: 

Docker Build Kommando

Durchatmen, du hast es fast geschafft! In Teil 4 fügen wir noch ein paar Kleinigkeiten zur Präsentation hinzu, bevor wir unser Projekt abschließen.

Inhaltsverzeichnis