Reveal

reveal.js herunterladen und entpacken. Den entpackten Order “reveal.js-master” in “reveal.js” umbenennen. Die Präsentation muss sich im gleichen Verzeichnis wie der Ordner reveal.js befinden.

Es gibt auch eine Erweiterung für VS-Code: vscode-reveal

Steuerzeichen

Drei Punkte, getrennt durch Leerzeichen, kennzeichnen eine Pause.
Der folgende Inhalt wird erst nach einem Tastendruck angezeigt: . . .

Notizen

Notizen werden mit “s” angezeigt und folgendermaßen eingegeben:

<div class="notes">
Meine Anmerkung
</div>

Videos & Bilder

Alles, was sich nicht direkt mit Markdown schreiben lässt, kann einfach per HTML eingebunden werden. So z.B. Videos über iframe oder den HTML5-Video-Befehl .

• Youtube: <iframe width="854" height="480" src="https://www.youtube.com/embed/yrRPLBYiiEc" frameborder="0" allowfullscreen></iframe>

• mp4-Video: <video src="film.mp4" width=320 height=240 controls>

• Bilder in einer bestimmten Größe: ![Bildname](bild.jpg){#id .class width=400 height=400px}

Konvertieren

Der Text praesentation.md wird mit Pandoc in eine HTML-Präsentation konvertiert:

pandoc -i --section-divs -V revealjs-url:./reveal.js -V theme=sky -V transition=convex -t revealjs -s -o revealtest.html testfolie.md 

oder man schreibt am Anfang des Dokuments einen YAML-Metadaten-Block:

---
title: "Titel"
author: Autor
date: April 08, 2017
theme: sky
transition: convex 
revealjs-url: ./reveal.js 
---

Dann wird so konvertiert:

pandoc -i --section-divs -t revealjs -s -o revealtest.html testfolie.md 

• Themes: beige, black, blood, league, moon, night, serif, simple, sky, solarized, white
• Übergangseffekte (transition): none, fade, slide, convex, concave, zoom

Theme-Anpassungen

Die Themes liegen in reveal.sj/css/theme. Diese können einfach angepasst werden.

Oder man legt im Verzeichnis der Präsentationsdatei (praesentation.md) eine neue css-Datei (meinstyle.css) mit folgendem Inhalt an:

@import url('https://fonts.googleapis.com/css?family=Quicksand');
@import url('https://fonts.googleapis.com/css?family=Oswald');

.reveal {
	font-size: 32px;
	font-family: 'Oswald', 'sans-serif'; }

.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
	font-family: 'Quicksand', 'sans-serif';
	font-weight:normal;
	text-transform: none;
	text-shadow: none; }

.reveal h1 { font-size: 2em; }
.reveal h2 { font-size: 1.7em; }
.reveal h3 { font-size: 1.4em; }
.reveal h4 { font-size: 1em; }

Diese wird dann mit dem zusätzlichen Schalter -css meinstyle.css übergeben.

Ein Logo im Hintergrund fügt man mit diesem Quelltext in der meinstyle.css-Datei ein:

body {
	background-image: url(logo.png);
	background-repeat: no-repeat;
	background-position:20px 20px;
	# oder auch background-position: right  top;
}

Präsentieren

• o - Übersicht
• f - Vollbildmodus
• b - schwarzer Bildschirm
• s - Notizen anzeigen
• Leertaste/Shift-Leertaste - Navigation
• Pfeiltasten - Navigation

Schalter

• -s standalone (eigenständiges Dokument)
• -i incremental (bei Aufzählungen werden die einzelnen Punkte nacheinander angezeigt)