Slidedecks in Markdown mit Reveal.js im MI Style. Hier mal eine Demopräsentation.
Präsentieren macht Spaß, Präsenationen bauen nicht. Mir zumindest nicht. Ich erwische mich ständig dabeim wie ich in Keynote anfange Pixel zu schubsen und aus dem Ich-mach-mal-eben-ein-paar-Slides-für-morgen wird eine abendfüllende Beschäftigung.
Also großer Markdown Fan und mittelgroßer reveal.js Fan habe ich dann mal ein kleines Mashup gemacht, in dem folgende Frameworks, Snippets und Ideen verbaut sind:
- reveal-md: Markdown Variante von reveal.js
- Live-Reload
- Semantische Templates (dazu später mehr)
- Material Icons
- MI Stylesheet 2K-18
MI-Slides braucht:
- NPM ab Version 6.0
- Node ab Version 9.0
Repo lokal klonen:
git clone [email protected]:cnoss/mi-slides.git
ins Verzeichnis wechseln:
cd mi-slides
Module installieren:
npm install
MI-Slides starten:
npm start
Demo Präsentation auswählen … Fertig
Präsentation als statisches HTML speichern:
npm start static
Präsentation wird dann in ein Unterverzeichnis in den static Folder gespielt.
Die Präsentationen liegen im Verzeichnis "slidedecks". Es empfiehlt sich für jede Präsentation ein eigenes Unterverzeichnis anzulegen. Dort muss eine Markdown Datei liegen und ggf. weitere Assets für die Präsentation, z.B. Bilder. Am Einfachsten ist es die Demo Präsentation einmal zu kopieren.
Im Kopfbereich der Markdown Datei müssen ein paar Metadaten angegeben werden. Außer dem Titel beziehen diese sich auf Einstellungen für Reveal.js.
---
title: Demo für MI Slides
revealOptions:
transition: 'slide'
backgroundTransition: 'zoom'
center: false
---
Alle Slides liegen in einer Markdown Datei. Bislang werden nur Slides in vertikaler Richtung unterstützt. Die einzelnen Folien werden durch einen Seperator (Leerzeile gefolgt von drei Minus-Zeichen und einer weiteren Leerzeile) voneinander getrennt.
Ich bin die erste Folie.
---
Und ich bin die zweite Folie.
Innerhalb der Folien können alle Markdown Auszeichnungen, wie Headlines, Aufzählungen und ähnliches verwendet werden.
---
# Ich bin eine Headline
## Und ich bin die kleine Schwester der Headline.
Jaja, und ich bin dann eben ein langweiliger Text, den sowieso keine liest,
weil heutzutage doch alle nur Filme schauen, oder Snaps oder was weiß denn ich.
Denkt dran:
- früher war alles besser
- jeden Tag eine gute Tat
- mehr fällt mir gerade nicht ein
Nach dem Seperator kann der Folie die Funktion und damit das Layout mitgegeben werden. Das Schlüsselwort dafür ist slide-is.
---
slide-is:simpel
# Ich bin eine Headline
## Und ich bin die kleine Schwester der Headline.
Die Begrüßungsfolie enthält in der Regel nur eine Headline und einen kurzen Text.
slide-is:welcome
# Ich bin eine Headline
Und ich bin ein kurzer Untertitel
Die Abschlussfolie enthält meist nur eine Headline zweiter Ordnung und ein paar weiterführende Informationen oder Kontaktdaten.
slide-is:outro
## Danke für's Mitmachen
icon:twitter [twitter.com/cnoss](http://twitter.com/cnoss)
icon:facebook [www.facebook.com/cnoss](https://www.facebook.com/cnoss)
Die einfachste Folie der Welt, sozusagen der VW Golf unter den Layouts: pragmatisch, einfach, gut.
Manchmal hat man viel zu sagen. Mit dieser Auszeichnung geht das ganz gut.
Für eine wichtige Aussage oder Erklärung. Der Text ist hier eher groß und die Headline ziemlich klein.
Für den Fall, dass man eine kleine Aufgabe herausgeben möchte.
Folie mit zufällig generiertem, farbigen Hintergrund, ideal für einen Zwischenstopp, einen gedanklichen Ausflug oder ein neuen inhaltichen Block.
Folie mit viel Platz für die Zusammenfassung eines inhaltichen Blocks.
Ein Bild sagt mehr als 1000 Worte. Bilder können via absoluter URL eingebunden werden:
slide-is:image https://upload.wikimedia.org/wikipedia/commons/1/11/Honigberg-wald-1s.jpg
Oder relativ zum Verzeichnis der Präsentation:
slide-is:image img/IMG_6024.jpg
Zum Einbinden von Videos. Videounterschriften sind möglich, dazu einfach Textlein schreiben wie gewohnt.
slide-is:video https://www.youtube.com/embed/sX7_0zs2qXQ
Super Videounterschrift
Mit dieser Anweisung wird das Bild nachher randbündig angezeigt.
slide-is:image-fullscreen https://upload.wikimedia.org/wikipedia/commons/1/11/Honigberg-wald-1s.jpg
… bitte in die Issues. Bugs bitte selber behalten. Falls noch jemand dieses kleine Tool mit weiter entwickeln möchte: bitte melden :)