== Warum was neues? ==
Ein neuer Ansatz neben dem klassischen Präsentieren mittels Powerpoint ist die Nutzung eines auf Markdown basiertem Präsentationssystems. Die Auszeichnungssprache [https://de.wikipedia.org/wiki/Markdown Markdown] besticht durch seine einfachen klaren Strukturen und die damit verbundene Kontrolle über das Endprodukt.

Die Präsentation wird in einem Texteditor erstellt und anschließend mit einer Konvertierungssoftware in HTML und PDF exportiert. Für die Konvertierung gibt es verschiedene Softwarepakete, durch das Testen der Endprodukte auf Barrierefreiheit hat sich Marp als Favorit herauskristalisiert. Auch hier ist nicht alles fehlerfrei, aber sowohl PDF als auch HTML lassen sich gut bedienen und die Kontrolloptionen über Bildpositionierung und Erweiterungsmöglichkeiten mit eigenen Themes überzeugen.

Marp gibt es in verschiedenen Varianten, interessant sind vor allem das Plugin für VisualStudio Code und die Kommandozeilenversion. Hier gehe ich insbesondere auf die Kommandozeilenversion ein, die in Kombination mit der Nutzung des Menübandes für Word für Schülerinnen und Schüler jedes Bildungsganges der allgemeinen Schulen gut und sicher zu nutzen ist.

Vorbereitung: [[Installation von Marp CLI (ansteuerbar mit Word)|Installation von Marp inklusive Menüband für Word]] (eigene Seite)

# [[Präsentieren mit Marp#Voreinstellung und Vorbereitung|Voreinstellungen in Word]]
# [[Präsentieren mit Marp#Gestaltung der Präsentation|Gestaltung der Präsentation]]
# [[Präsentieren mit Marp#3. Durchführung der Präsentation|Durchführung der Präsentation]]
# [[Präsentieren mit Marp#4. Tipps und Tricks für Profis|Tipps und Tricks für Profis]]

== Voreinstellung und Vorbereitung ==
Die Präsentation kann direkt in Word erstellt werden, der Export nach html und PDF erfolgt über das Marp-Menüband. Damit dies sauber funktioniert, muss folgender Punkt in den Word Optionen '''deaktiviert''' sein:

'''Dokumentprüfung, Autokorrekturoptionen, Autoformat während der Eingabe, Während der Eingabe übernehmen: Rahmenlinien'''

== Gestaltung der Präsentation ==
Der Aufbau einer Präsentation ist sehr einfach.

=== 1. Kopf ===
---
marp: true
---
Der Kopf muss den Ausdruck marp: true enthalten. Optional lassen sich noch weitere Parameter setzen, dies ist für den Anfang jedoch nicht erforderlich. [[Präsentieren mit Marp#2.3 Kopfanpassungen|Hier]] folgen aber noch weitere Erläuterungen

=== 2. Foliengestaltung ===
Jede Folie wird durch Zeilen mit drei Minuszeichen begrenzt. Vor dem Folienwechsel sollte immer eine Leerzeile stehen.
--- (Folienwechsel)
# Titel der Folie
- Stichpunkt
- Stichpunkt

--- (nächste Folie)
Als Orientierung, welche Anzahl an Stichpunkten sinnvoll ist, kann man den Schülerinnen und Schülern eine "Handvoll Stichpunkte" - also fünf Stichpunkte - pro Folie nennen.

Möchte man mit Unterüberschriften arbeiten, so kann mit ## Unterüberschrift eine Überschrift der Ebene 2 hinzugefügt werden. Für Stichpunkte gibt es auch die Option mit "Aufblättern" zu arbeiten, davon raten wir jedoch blinden Schülerinnen und Schülern eher ab, da die Kontrolle und Bedienung dadurch etwas erschwert wird. Möchte man dies dennoch, so können die Stichpunkte mit einem * angekündigt werden.

Mit Markdown lassen sich auch Formatierungen wie Kursivdruck oder Fettdruck erzeugen: ** erzeugt einen fetten Text, * erzeugt einen kursiven Text.
---
# Titel der Folie
* Stichpunkt 1
* Stichpunkt 2
* **besonders wichtiges Argument**
---

==== 2.1 Bilder einfügen ====
Bilder sind für Präsentationen vor einem sehenden Publikum eine gute Hilfe, Stimmungen und zusätzliche Informationen zu vermitteln. Auch wenn mittels Google Bildersuche oder diversen KI Bildgeneratoren vielleicht in Zukunft auch eine Gestaltung ohne sehende Hilfe möglich ist, so empfehlen wir doch sehr, dass Bilder in einer hohen Auflösung von einer sehenden Person auf Anweisung des Erstellers herausgesucht werden. Wichtig ist, die Bilder in den gleichen Ordner wie die Textdatei der Präsentation abzulegen und mit einem kurzen, eindeutligen Dateinamen zu benennen.

Marp bietet für Bilder verschiedene Einfügeoptionen. Es ist sinnvoll, die Syntax mit den Schülerinnen und Schülern zu besprechen, da dann auch nachträglich Anpassungen vorgenommen werden können.

Hier zunächst die Grundstruktur:
![bg Kurzbeschreibung](bildname.jpg)
'''Achtung: Der Bildname darf keine Leerzeichen enthalten!'''

Durch ![bg] - bg steht für Background - wird bei der Konvertierung ein Bild in den Hintergrund einer Folie gelegt. In runden Klammern folgt der exakte Dateiname mit Endung (ggf. im Explorer die Ansicht anpassen, so dass die Endungen immer angezeigt werden). Vor die schließende eckige Klammer kann mit wenigen Worten eine Bildbeschreibung eingefügt werden, die später auch in der html-Datei eingebaut wird.

Ohne weitere Zusätze wird das Bild über die komplette Folienbreite und Folienhöhe eingefügt. Hierbei gibt es keine Verzerrung, es wird aber entweder oben/unten oder rechts/links "beschnitten", so dass es die Folie vollständig ausfüllt.

Anhand des [https://unsplash.com/de/fotos/ein-mann-der-auf-dem-gipfel-eines-berges-neben-einem-see-steht-BcWAKeBRbvE Fotos von Deepak Nautiyal auf Unsplash] soll hier kurz veranschaulicht werden, was das bedeutet.

'''Originalbild (hochkant):'''

[[Datei:Blauroter-vogel.jpg|alternativtext=blau-roter Vogel|rahmenlos|533x533px]]

Hier nun die Einbindung als Hintergrund einer Folie:
![bg blauroter Vogel](blauroter-vogel.jpg)
[[Datei:Zuschnitt-vogel.png|alternativtext=Zuschnitt des Vogelbildes auf Präsentationsformat (unten und oben abgeschnitten, die Füße sind nicht mehr zu sehen)|rahmenlos|535x535px]]

Für ein Bild im Hochkantformat ist das komplette Ausfüllen der Folie nicht sinnvoll, da in der Regel von oben und unten viel zu viel beschnitten werden muss. Entweder entscheidet man sich für eine Seite (linke oder rechte Hälfte der Folie) oder gibt mit "fit" eine Zusatzanweisung, dass das Bild komplett zu sehen sein soll.
![bg fit blauroter Vogel](blauroter-vogel.jpg)
[[Datei:BlauroterVogel-fit.png|alternativtext=Das Bild des blauroten Vogels ist mittig auf der Folie platziert und komplett zu sehen, rechts und links breite weiße Balken.|rahmenlos|521x521px]]

Nun ist das Bild vollständig auf der Folie zu sehen, allerdings bietet es sich für Hochkantbilder wirklich deutlich mehr an, nur eine Hälfte der Folie damit zu füllen.
![bg left blauroter Vogel](blauroter-vogel.jpg) oder ![bg right blauroter Vogel](blauroter-vogel.jpg)
[[Datei:BlauroterVogel-left.png|alternativtext=Das Bild des blauroten Vogels ist auf die linke Hälfte der Folie eingepasst, rechts steht der Titel "Das ist ein blau-roter Vogel"|rahmenlos|640x640px]][[Datei:BlauroterVogel-right.png|alternativtext=Der blaurote Vogel ist auf der rechten Hälfte der Folie zu sehen, links der Titel "Das ist ein blau-roter Vogel"|rahmenlos|640x640px]]

Durch "right" bzw. "left" kann man die Folienhälfte auswählen. Auch hier hat man die Option, das Bild bei Bedarf (wenn alle Details auch in den Randbereichen sichtbar sein sollen) mit dem "fit" Zusatz einzupassen.

Für die Schülerinnen und Schüler hat sich je nach Geschmack ![bg left] bzw. ![bg right] als beste Option herauskristallisiert.

==== 2.2 Audio und Video ====
In PDF lassen sich weder Audio noch Video einbinden, für html gibt es die Option mittels html-Tags. In der Steuerung ist es nicht optimal, aber mit ein paar Kniffen beherrschbar. Einfügen sollte man ein Video immer auf einer eigener Folie, beim Audiocontroller ist nicht so viel Platz erforderlich, daher kann dort ein Titel noch problemlos hinzugefügt werden.

Wichtig ist, eine Leerzeile über und unter den Eintrag zu setzen.

Wie bei Bildern gilt das gleiche Prinzip: die Video-/Audiodateien müssen im gleichen Ordner wie die Präsentation liegen. Alternativ kann man auch direkte Internetlinks zu Videos hinter src einsetzen. Auch hier gilt: keine Leerzeichen in Dateinamen nutzen.
---

<video src=videodatei.mp4 controls width=100%></video>

---

---
# Titel der Folie

<audio src=audio.mp3 controls></audio>

---

==== 2.3 Kopfanpassungen ====
Im Kopf lassen sich neben dem reinen Aktivieren von Marp weitere Parameter setzen. Hier eine kurze Übersicht der wichtigsten
---
marp: true
class: invert 'Wechsel auf dunkles Farbschema
paginate: true 'Hier werden Seitenzahlen unten rechts hinzugefügt
title: "Titel der Präsentation"
footer: "Fusszeile"
header: "Kopfzeile"
theme: style 'Wenn man einen individuellen Stil möchte
---

==== 2.4 Links, Zitate und Code ====

===== Verlinkungen =====
Um Links innerhalb einer Präsentation zu erstellen, muss der Linktext in eckigen Klammern und die Nummer der Folie in runden Klammern dahinter angegeben werden:
[Springe auf Folie 2](#2)
Internetlinks können direkt einfügt werden, indem du einen Linktext in eckigen und den Link in runde Klammern setzt.
[SBBZ-Ilvesheim](https:\\sbbz-ilvesheim.de)

===== Zitat =====
Einen Zitatblock kann man mit vorangestelltem Größerzeichen formatieren:
> Zitatblock
> Das ist ein Text
<div>

== 3. Durchführung der Präsentation ==
Für die Durchführung der Präsentation hat man zwei Optionen mit unterschiedlichen Vorteilen. Beide lassen sich mit einem Presenter bedienen.

==== PDF ====
Die PDF hat den Vorteil der einfachen Bedienbarkeit. Folien lassen sich einfach mit den Pfeiltasten weiterblättern (mit PFEIL AB kann man von oben durch die Folie hindurchgehen, das Folienende ist durch mc-ref Grafik ausgezeichnet). Für die Präsentation empfiehlt es sich den Vollbildmodus (STRG+L) zu starten.

Überschriften sind ausgezeichnet, Listen gut auslesbar. Bilder jedoch sind nicht mit dem im Quelltext angegebenen Alternativtext versehen und Videos sowie Audios lassen sich selbstverständlich nicht im PDF Viewer abspielen.

Das Format bietet sich zudem als "Abgabe" bei der Lehrkraft an - hier sind die Bilder direkt eingebettet und die Übergabe einer Datei genügt.

==== HTML ====
Die html-Datei hat andere Vorteile: Bilder haben ihre Bildbeschreibung, Videos und Audios lassen sich abspielen (wenn auch etwas hakelig). Nach dem Abspielen von Video- und Audiodateien kann es sein, dass die Präsentation hängen bleibt und das Weiterblättern nicht mehr möglich ist. In diesem Fall einfach einmal F5 drücken um die Seite frisch zu laden.

Mit ALT+PFEIL RECHTS oder ALT+ BILDAB kann man die nächste Folie aufrufen. Zurückspringen zur vorherigen Folie: ALT+PFEIL LINKS oder ALT+BILDAUF

Achtung! Der Cursor befindet sich zu Beginn nicht auf dem Anfang der Folie - hier jeweils mit STRG+POS1 an den Anfang springen. Hat man die Foliennummerierung aktiviert, kann man das Ende der Folie immer an der Foliennummer erkennen.

Für das Abspielen von Videos gilt: nach dem Abspielen ist der Cursor im Videoplayer gefangen, einmal F5 drücken und dann zur nächsten Folie weiterblättern.

Nutzt man die html-Datei zum Präsentieren, so muss man immer den gesamten Präsentationsorder "mitnehmen", da die Bilder und Videos lediglich verlinkt und damit eingebunden, aber nicht eingebettet sind.

== 4. Tipps und Tricks für Profis ==

===== Codeblöcke =====
Möchte man einen Codeblock einbinden, muss dieser mit drei Backticks (`) angekündigt werden. Danach folgt der Name der Programmiersprache und in einer neuen Zeile der Code und wieder drei Backticks.
```python
@import
if this
then that
```

===== Diagramme =====
Möchte man Mermaid Diagramme in Marp einbauen, so muss zusätzlich das Mermaid Modul hinzugeladen werden. Das ist nur für erfahrenere Nutzer empfehlenswert. Das Skript muss in der Präsentation beispielsweise auf der ersten Folie eingebunden werden, indem folgender Baustein eingefügt wird:
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>

Anschließend kann man über einen html "<nowiki><div>-Tag" das Diagramm setzen: </nowiki><div>
<nowiki>
<div class="mermaid">
graph LR;
a --> b;
b --> c;
c --> a;
</div></nowiki>

==== Folienübergänge ====
Marp bietet einige Optionen für den Übergang zwischen Folien. Diese kann man Präsentationsübergreifend im Kopf festlegen. Alternativ kann man den Übergang durch den Eintrag  auf einer Folie auch nur für einzelne Folien festlegen.

Empfehlenswert, da nicht zu aufdringlich, ist beispielsweise diese Option:
transition: fade

Die Übergänge sind nur in der html Version nutzbar. Hier eine Liste aller Möglichkeiten:
clockwise, counterclockwise, cover, coverflow, cube, cylinder, diamond, drop, explode, fade, fade-out, fall, flip, glow, implode, in-out, iris-in, iris-out, overlap, pivot, pull, push, reveal, revealslide, swap, swipe, swoosh, wipe, zoom

Eine Voransicht des Effektes lässt sich auf https://github.com/marp-team/marp-cli/blob/main/docs/bespoke-transitions/README.md#built-in-transitions einsehen.

=== Theme ändern ===
Möchtest du ein anderes Theme nutzen, so hast du standardmäßig folgende Themes zur Auswahl:

gaia, uncover und default, jeweils mit der Option der Invertierung. Gaia und Uncover bieten wesentlich weniger Platz auf einer Folie, so dass eine Folie leicht überläuft.

Eine weitere Alternative ist, ein eigenes Stilset zu nutzen. Über das Menüband wird dieses automatisch erstellt, wenn du "Exportieren mit Stil" nutzt. Die Vorlage ist mit einer etwas größeren Schriftart und bietet die Möglichkeit einer speziellen Titelfolie. Wichtig: im Kopf muss der Eintrag theme: style gesetzt werden.

=== Titelfolie ===
Um eine Titelfolie mit zentriertem, besonders großem Text zu nutzen, muss man

 auf dieser Folie hinzufügen. Dies kann auch über das Menü vorgenommen werden. Bei anschließendem Exportieren mit Stil wird die Folie dann wie gewünscht erzeugt. Für eine invertierte Darstellung gibt es einen eigenen Button, der stattdessen  einfügt.

=== Hintergrund und Schriftfarbe ===
Auch wenn wir die Nutzung der Standardfarben (Hintergrund weiß oder invertiert) dringend empfehlen, ist es möglich, die Farben anzupassen, ohne in die manuelle Bearbeitung der style.css zu müssen.

Über das Stil-Menü kannst du verschiedene Farben festlegen. Hintergrundfarbe, Schriftfarbe, Farbe der Überschriften der Ebene 1 und Farbe von Hervorhebungen (Fettdruck) in Überschriften. Zusätzlich lässt sich eine andere Schriftart wählen. Diese Einstellungen lassen sich über die Zurücksetzen-Option wieder auf die Standardwerte stellen. Sie werden nur angewandt, wenn Exportieren mit Stil gewählt wird.

=== Gestaltung einzelner Folien ===
Um Anpassungen für nur eine Folie oder einen Abschnitt festzulegen, musst du zu Beginn der Folie einen sogenannten HTML-Kommentar hinzufügen. Unterschieden wird, ob du für alle folgenden Folien diese Anpassung haben möchtest, oder nur für die aktuelle. Für einen Übergang kann das dann so aussehen:

==== Für alle folgenden Folien: ====


==== Für die nächste Folie: ====


Diese Möglichkeit lässt sich auch auf andere Steuerbefehle anwenden. So kann man beispielsweise temporär mit einer Invertierung arbeiten.

==== Für alle folgenden Folien: ====


==== Für die aktuelle Folie: ====


Auf diesem Wege lässt sich auch der Footer/Header und die Seitennummerierung auf einzelnen Folien ausblenden. Dies ist insbesondere bei Folien, die nur ein Bild enthalten, sinnvoll.

2026-06-09T09:34:28Z

Henn: /* 3. Durchführung der Präsentation */

ECDL: [[PowerPoint 2010]]

== Präsentieren mit Marp ==
'''Das Menüband für Word hat eine Generalüberholung erhalten und enthält viele Verbesserungen - unter [[Installation von Marp CLI (ansteuerbar mit Word)]] finden sich alle Informationen dazu.'''

Ein neuer Ansatz neben dem klassischen Präsentieren mittels Powerpoint ist die Nutzung eines auf Markdown basiertem Präsentationssystems. Die Auszeichnungssprache [https://de.wikipedia.org/wiki/Markdown Markdown] besticht durch seine einfachen klaren Strukturen und die damit verbundene Kontrolle über das Endprodukt.

Die Präsentation wird in einem Texteditor erstellt und anschließend mit einer Konvertierungssoftware in HTML und PDF exportiert. Für die Konvertierung gibt es verschiedene Softwarepakete, durch das Testen der Endprodukte auf Barrierefreiheit hat sich Marp als Favorit herauskristalisiert. Auch hier ist nicht alles fehlerfrei, aber sowohl PDF als auch HTML lassen sich gut bedienen und die Kontrolloptionen über Bildpositionierung und Erweiterungsmöglichkeiten mit eigenen Themes überzeugen.

Marp gibt es in verschiedenen Varianten, interessant sind vor allem das Plugin für VisualStudio Code und die Kommandozeilenversion. Hier gehe ich insbesondere auf die Kommandozeilenversion ein, die in Kombination mit der Nutzung des Menübandes für Word für Schülerinnen und Schüler jedes Bildungsganges der allgemeinen Schulen gut und sicher zu nutzen ist.

# [[Installation von Marp CLI (ansteuerbar mit Word)|Installation von Marp inklusive Menüband für Word]]
# [[Marp Gestaltung der Präsentation|Gestaltung der Präsentation]]
# [[Marp Präsentation Durchführung|Durchführung der Präsentation]]

== Voreinstellung und Vorbereitung ==
Die Präsentation kann direkt in Word erstellt werden, der Export nach html und PDF erfolgt über das Marp-Menüband. Damit dies sauber funktioniert, muss folgender Punkt in den Word Optionen '''deaktiviert''' sein:

'''Dokumentprüfung, Autokorrekturoptionen, Autoformat während der Eingabe, Während der Eingabe übernehmen: Rahmenlinien'''

== Gestaltung der Präsentation ==
Der Aufbau einer Präsentation ist sehr einfach.

=== 1. Kopf ===
---
marp: true
---
Der Kopf muss den Ausdruck marp: true enthalten. Optional lassen sich noch weitere Parameter setzen, dies ist für den Anfang jedoch nicht erforderlich. [[Präsentationsmedien|Hier]] folgen aber noch weitere Erläuterungen

=== 2. Foliengestaltung ===
Jede Folie wird durch Zeilen mit drei Minuszeichen begrenzt. Vor dem Folienwechsel sollte immer eine Leerzeile stehen.
--- (Folienwechsel)
# Titel der Folie
- Stichpunkt
- Stichpunkt

--- (nächste Folie)
Als Orientierung, welche Anzahl an Stichpunkten sinnvoll ist, kann man den Schülerinnen und Schülern eine "Handvoll Stichpunkte" - also fünf Stichpunkte - pro Folie nennen.

Möchte man mit Unterüberschriften arbeiten, so kann mit ## Unterüberschrift eine Überschrift der Ebene 2 hinzugefügt werden. Für Stichpunkte gibt es auch die Option mit "Aufblättern" zu arbeiten, davon raten wir jedoch blinden Schülerinnen und Schülern eher ab, da die Kontrolle und Bedienung dadurch etwas erschwert wird. Möchte man dies dennoch, so können die Stichpunkte mit einem * angekündigt werden.

Mit Markdown lassen sich auch Formatierungen wie Kursivdruck oder Fettdruck erzeugen: ** erzeugt einen fetten Text, * erzeugt einen kursiven Text.
---
# Titel der Folie
* Stichpunkt 1
* Stichpunkt 2
* **besonders wichtiges Argument**
---

==== 2.1 Bilder einfügen ====
Bilder sind für Präsentationen vor einem sehenden Publikum eine gute Hilfe, Stimmungen und zusätzliche Informationen zu vermitteln. Auch wenn mittels Google Bildersuche oder diversen KI Bildgeneratoren vielleicht in Zukunft auch eine Gestaltung ohne sehende Hilfe möglich ist, so empfehlen wir doch sehr, dass Bilder in einer hohen Auflösung von einer sehenden Person auf Anweisung des Erstellers herausgesucht werden. Wichtig ist, die Bilder in den gleichen Ordner wie die Textdatei der Präsentation abzulegen und mit einem kurzen, eindeutligen Dateinamen zu benennen.

Marp bietet für Bilder verschiedene Einfügeoptionen. Es ist sinnvoll, die Syntax mit den Schülerinnen und Schülern zu besprechen, da dann auch nachträglich Anpassungen vorgenommen werden können.

Hier zunächst die Grundstruktur:
![bg Kurzbeschreibung](bildname.jpg)
'''Achtung: Der Bildname darf keine Leerzeichen enthalten!'''

Durch ![bg] - bg steht für Background - wird bei der Konvertierung ein Bild in den Hintergrund einer Folie gelegt. In runden Klammern folgt der exakte Dateiname mit Endung (ggf. im Explorer die Ansicht anpassen, so dass die Endungen immer angezeigt werden). Vor die schließende eckige Klammer kann mit wenigen Worten eine Bildbeschreibung eingefügt werden, die später auch in der html-Datei eingebaut wird.

Ohne weitere Zusätze wird das Bild über die komplette Folienbreite und Folienhöhe eingefügt. Hierbei gibt es keine Verzerrung, es wird aber entweder oben/unten oder rechts/links "beschnitten", so dass es die Folie vollständig ausfüllt.

Anhand des [https://unsplash.com/de/fotos/ein-mann-der-auf-dem-gipfel-eines-berges-neben-einem-see-steht-BcWAKeBRbvE Fotos von Deepak Nautiyal auf Unsplash] soll hier kurz veranschaulicht werden, was das bedeutet.

'''Originalbild (hochkant):'''

[[Datei:Blauroter-vogel.jpg|alternativtext=blau-roter Vogel|rahmenlos|533x533px]]

Hier nun die Einbindung als Hintergrund einer Folie:
![bg blauroter Vogel](blauroter-vogel.jpg)
[[Datei:Zuschnitt-vogel.png|alternativtext=Zuschnitt des Vogelbildes auf Präsentationsformat (unten und oben abgeschnitten, die Füße sind nicht mehr zu sehen)|rahmenlos|535x535px]]

Für ein Bild im Hochkantformat ist das komplette Ausfüllen der Folie nicht sinnvoll, da in der Regel von oben und unten viel zu viel beschnitten werden muss. Entweder entscheidet man sich für eine Seite (linke oder rechte Hälfte der Folie) oder gibt mit "fit" eine Zusatzanweisung, dass das Bild komplett zu sehen sein soll.
![bg fit blauroter Vogel](blauroter-vogel.jpg)
[[Datei:BlauroterVogel-fit.png|alternativtext=Das Bild des blauroten Vogels ist mittig auf der Folie platziert und komplett zu sehen, rechts und links breite weiße Balken.|rahmenlos|521x521px]]

Nun ist das Bild vollständig auf der Folie zu sehen, allerdings bietet es sich für Hochkantbilder wirklich deutlich mehr an, nur eine Hälfte der Folie damit zu füllen.
![bg left blauroter Vogel](blauroter-vogel.jpg) oder ![bg right blauroter Vogel](blauroter-vogel.jpg)
[[Datei:BlauroterVogel-left.png|alternativtext=Das Bild des blauroten Vogels ist auf die linke Hälfte der Folie eingepasst, rechts steht der Titel "Das ist ein blau-roter Vogel"|rahmenlos|640x640px]][[Datei:BlauroterVogel-right.png|alternativtext=Der blaurote Vogel ist auf der rechten Hälfte der Folie zu sehen, links der Titel "Das ist ein blau-roter Vogel"|rahmenlos|640x640px]]

Durch "right" bzw. "left" kann man die Folienhälfte auswählen. Auch hier hat man die Option, das Bild bei Bedarf (wenn alle Details auch in den Randbereichen sichtbar sein sollen) mit dem "fit" Zusatz einzupassen.

Für die Schülerinnen und Schüler hat sich je nach Geschmack ![bg left] bzw. ![bg right] als beste Option herauskristallisiert.

==== 2.2 Audio und Video ====
In PDF lassen sich weder Audio noch Video einbinden, für html gibt es die Option mittels html-Tags. In der Steuerung ist es nicht optimal, aber mit ein paar Kniffen beherrschbar. Einfügen sollte man ein Video immer auf einer eigener Folie, beim Audiocontroller ist nicht so viel Platz erforderlich, daher kann dort ein Titel noch problemlos hinzugefügt werden.

Wichtig ist, eine Leerzeile über und unter den Eintrag zu setzen.

Wie bei Bildern gilt das gleiche Prinzip: die Video-/Audiodateien müssen im gleichen Ordner wie die Präsentation liegen. Alternativ kann man auch direkte Internetlinks zu Videos hinter src einsetzen. Auch hier gilt: keine Leerzeichen in Dateinamen nutzen.
---

<video src=videodatei.mp4 controls width=100%></video>

---

---
# Titel der Folie

<audio src=audio.mp3 controls></audio>

---

==== 2.3 Links, Zitate und Code ====

===== Verlinkungen =====
Um Links innerhalb einer Präsentation zu erstellen, muss der Linktext in eckigen Klammern und die Nummer der Folie in runden Klammern dahinter angegeben werden:
[Springe auf Folie 2](#2)
Internetlinks können direkt einfügt werden, indem du einen Linktext in eckigen und den Link in runde Klammern setzt.
[SBBZ-Ilvesheim](https:\\sbbz-ilvesheim.de)

===== Zitat =====
Einen Zitatblock kann man mit vorangestelltem Größerzeichen formatieren:
> Zitatblock
> Das ist ein Text

===== Codeblöcke =====
Möchte man einen Codeblock einbinden, muss dieser mit drei Backticks (`) angekündigt werden. Danach folgt der Name der Programmiersprache und in einer neuen Zeile der Code und wieder drei Backticks.
```python
@import
if this
then that
```

===== Diagramme =====
Möchte man Mermaid Diagramme in Marp einbauen, so muss zusätzlich das Mermaid Modul hinzugeladen werden. Das ist nur für erfahrenere Nutzer empfehlenswert. Das Skript muss in der Präsentation beispielsweise auf der ersten Folie eingebunden werden, indem folgender Baustein eingefügt wird:
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>

Anschließend kann man über einen html "<nowiki><div>-Tag" das Diagramm setzen: </nowiki><div>
<nowiki>
<div class="mermaid">
graph LR;
a --> b;
b --> c;
c --> a;
</div></nowiki>

==== 2.4 Weitere Parameter ====
Im Kopf lassen sich neben dem reinen Aktivieren von Marp weitere Parameter setzen. Hier eine kurze Übersicht der wichtigsten
---
marp: true
class: invert 'Wechsel auf dunkles Farbschema
paginate: true 'Hier werden Seitenzahlen unten rechts hinzugefügt
title: "Titel der Präsentation"
footer: "Fusszeile"
header: "Kopfzeile"
theme: style 'Wenn man einen individuellen Stil möchte
---

==== 2.5 Folienübergänge ====
Marp bietet einige Optionen für den Übergang zwischen Folien. Diese kann man Präsentationsübergreifend im Kopf festlegen. Alternativ kann man den Übergang durch den Eintrag  auf einer Folie auch nur für einzelne Folien festlegen.

Empfehlenswert, da nicht zu aufdringlich, ist beispielsweise diese Option:
transition: fade

Die Übergänge sind nur in der html Version nutzbar. Hier eine Liste aller Möglichkeiten:
clockwise, counterclockwise, cover, coverflow, cube, cylinder, diamond, drop, explode, fade, fade-out, fall, flip, glow, implode, in-out, iris-in, iris-out, overlap, pivot, pull, push, reveal, revealslide, swap, swipe, swoosh, wipe, zoom

Eine Voransicht des Effektes lässt sich auf https://github.com/marp-team/marp-cli/blob/main/docs/bespoke-transitions/README.md#built-in-transitions einsehen.
=== 3. Durchführung der Präsentation ===

Für die Durchführung der Präsentation hat man zwei Optionen mit unterschiedlichen Vorteilen. Beide lassen sich mit einem Presenter bedienen.

==== PDF ====
Die PDF hat den Vorteil der einfachen Bedienbarkeit. Folien lassen sich einfach mit den Pfeiltasten weiterblättern (mit PFEIL AB kann man von oben durch die Folie hindurchgehen, das Folienende ist durch mc-ref Grafik ausgezeichnet). Für die Präsentation empfiehlt es sich den Vollbildmodus (STRG+L) zu starten.

Überschriften sind ausgezeichnet, Listen gut auslesbar. Bilder jedoch sind nicht mit dem im Quelltext angegebenen Alternativtext versehen und Videos sowie Audios lassen sich selbstverständlich nicht im PDF Viewer abspielen.

Das Format bietet sich zudem als "Abgabe" bei der Lehrkraft an - hier sind die Bilder direkt eingebettet und die Übergabe einer Datei genügt.

==== HTML ====
Die html-Datei hat andere Vorteile: Bilder haben ihre Bildbeschreibung, Videos und Audios lassen sich abspielen (wenn auch etwas hakelig). Nach dem Abspielen von Video- und Audiodateien kann es sein, dass die Präsentation hängen bleibt und das Weiterblättern nicht mehr möglich ist. In diesem Fall einfach einmal F5 drücken um die Seite frisch zu laden.

Mit ALT+PFEIL RECHTS oder ALT+ BILDAB kann man die nächste Folie aufrufen. Zurückspringen zur vorherigen Folie: ALT+PFEIL LINKS oder ALT+BILDAUF

Achtung! Der Cursor befindet sich zu Beginn nicht auf dem Anfang der Folie - hier jeweils mit STRG+POS1 an den Anfang springen. Hat man die Foliennummerierung aktiviert, kann man das Ende der Folie immer an der Foliennummer erkennen.

Für das Abspielen von Videos gilt: nach dem Abspielen ist der Cursor im Videoplayer gefangen, einmal F5 drücken und dann zur nächsten Folie weiterblättern.

Nutzt man die html-Datei zum Präsentieren, so muss man immer den gesamten Präsentationsorder "mitnehmen", da die Bilder und Videos lediglich verlinkt und damit eingebunden, aber nicht eingebettet sind.

2026-06-03T14:32:54Z

Henn:

Auswahlfenster Folienübergänge MarpMenü

Installation von Marp CLI (ansteuerbar mit Word)

2026-06-03T14:31:34Z

Henn: /* Titelfolie und Titelfolie invers */

https://github.com/marp-team/marp-cli/releases/

Download der Zip-Datei der aktuellsten Windowsversion und Abspeichern der entpackten marp.exe unter C:\Program Files\marp-cli\marp.exe (Administratorenrechte zum Erstellen des Ordners und dem Verschieben erforderlich!!)

Ablegen des [https://nextcloud.augenbit.de/index.php/s/tsYq5GowQZSZ7jM/download Menübandes] im STARTUP-Ordner von Word (erreichbar über %appdata%, Microsoft, Word)

[[Datei:MarpMenueband1.1neu.png|alternativtext=Ansicht des Marp Menübandes für Word|rahmenlos|856x856px]]

Neuerungen in der V1.1 des Menübandes:

* Erweiterung des Kopfes (eigene Themedatei)
* Härtung des gesamten Codes
* Kopf ist nun auch im Nachhinein zu bearbeiten, der Block am Beginn des Dokuments wird dann entsprechend edititert
* Barrierefreiheit der Dialogfelder wurde erhöht (Komboboxen werden nun bei Änderung angesagt)
* Bei Leerzeichen in Bilder, Audio und Video Dateinamen wird automatisch das erforderliche Zeichen ersetzt (meine Bilder.jpg wird zu meine%20Bilder.jpg), sodass eine Wandlung möglich ist.
* Exportieren mit Stil erstellt eine rudimentäre style.css (falls nicht schon eine eigene vorhanden), die eine etwas größere Schrift und bessere Darstellungsmöglichkeiten von Tabellen bietet, Titelfolienlayout unterstützt und sonst auf dem Standardtheme basiert.
* Über das Stilmenü lassen sich individuelle Farbkombinationen für Hintergrund, Schrift, Überschrift 1 und Hervorhebungen in der Überschrift auswählen, zudem kann die Schriftart geändert werden
* Bei "Übergänge" kann eine Transition für den Folienübergang gewählt werden.
* Funktionen für Fortgeschrittene: Tabellenvorlage, Codeblockvorlage, Script um Mermaid Diagramme einbinden zu können.

=== Bedienung: ===
Aufruf des Menüs: ALT+#

Kopf: K

Bild: B

neue Folie: FL

Link: L

Audio: A

Video: V

Hilfe: H

Export: EX

Export mit Stil: ES

Titelfolie: TT

Titelfolie inverst: TI

Stil: ST

Übergänge: Ü

Tabellen: TB

Codeblock: C

Mermaid-Script: MM

== Funktionalität ==

=== Gruppe Gestaltung ===

===== Kopf =====
Im Kopf lassen sich Startparameter festlegen. Diese werden in den Steuerungskopf der Datei geschrieben. Der Block wird bei erstmaliger Nutzung angelegt.

---

marp: true

---

[[Datei:MarpMenuKopf.png|alternativtext=Dialogfeld Kopf Marp Menü|rahmenlos|532x532px]]

* Dunkler Hintergrund aktiviert das Inverse Schema (class: invert)
* Seitenzahlen aktiviert die Foliennummerierung (paginate: true)
* Titel der Präsentation erscheint als Name im Tab des Browsers bzw. in der Fensterleiste der PDF
* Fußzeile und Kopfzeile
* eigene Stildatei ermöglicht Anpassungen an Folienübergängen, Schriftart, Farben.

==== Bild ====
Über dieses Dialogfenster lassen sich Bilder einfügen. Der Dateiname muss zwingend mit Dateiendung eingegeben werden (.jpg oder .png). Die Position kann über das Kombinationsfeld ausgewählt werden (rechts, links, Vollbild), die Kurzbeschreibung erscheint in der html Datei am Ende als Alternativtext. Leerzeichen werden seit dieser Version durch die passenden Steuerungszeichen ersetzt, sind also kein Problem mehr.

Über die Checkbox "Bild an die Folie anpassen" kann zusätzlich der Parameter "fit" eingefügt werden.

[[Datei:BildMarpMenü.png|alternativtext=Ansicht des Bilddialogs beim Marpmenü|rahmenlos|500x500px]]

==== neue Folie ====
Dies fügt eine Leerzeile, den Folientrenner --- und eine neue Zeile ein.

==== Link ====
Der Baustein [Linktext](https:\\linkadresse) wird eingefügt. Der Linktext in den eckigen Klammern erscheint sichtbar in der Präsentation, die linkadresse muss vollständig eingefügt werden.

==== Audio und Video ====
[[Datei:AudioMarpMenü.png|alternativtext=Ansicht Audio Dialog Marpmenü|rahmenlos|400x400px]][[Datei:VideoMarpMenue.png|alternativtext=Ansicht Video Dialog Marp Menü|rahmenlos|400x400px]]

Hier muss wie beim Bild der gesamte Dateiname eingegeben werden. Leerzeichen werden seit dieser Version durch die passenden Steuerungszeichen ersetzt, sind also kein Problem mehr.

==== Hilfe ====
Hier finden sich die wichtigsten Auszeichnungsmöglichkeiten.

[[Datei:HilfeMarpMenue.png|alternativtext=Hilfefenster des Marp-Menüs|rahmenlos|319x319px]]

==== Exportoptionen ====
[[Datei:ExportMarpMenue.png|alternativtext=Buttons für den Export aus dem Marp Menü|rahmenlos|200x200px]]

Es gibt zwei Optionen für den Export. Möchte man einfach das Standardtheme, welches der Entwickler von Marp entworfen hat, Gaia oder Uncover, so genügt es einfach zu Exportieren. Es werden immer eine PDF und eine HTML Datei erzeugt. Zusätzlich wird das "Zwischenprodukt" Markdown mit der Endung .md geschrieben.

Exportieren mit Stil bietet in der Grundeinstellung das Standardtheme mit etwas größerer Schrift und besserer Folienausnutzung bei Tabellen. Um zentrierte Titelfolien erstellen zu können, ist hier eine zusätzliche Klasse eingefügt, welches den Titel, etwas größer und zentriert auf der so ausgezeichneten Folie platziert. Außerdem lassen sich individuelle Farb- und Schriftartanpassungen über den Stildialog einbinden.

Im Hintergrund wird eine .css Datei geschrieben, die im Präsentationsordner liegt und für den Export dann genutzt wird.

==== Titelfolie und Titelfolie invers ====
[[Datei:TitelfolieMarpMenue.png|alternativtext=Ansicht Titelfolie zentrierter Text |rahmenlos]][[Datei:TitelInversMarpMenue.png|alternativtext=Ansicht inverse Titelfolie mit zentriertem Text|rahmenlos]]

Um solche Titelfolien zu erzeugen muss auf der gewünschten Folie <nowiki></nowiki> oder <nowiki></nowiki> geschrieben werden. Dies übernehmen die beiden Buttons. Wichtig: Die Ausrichtung funktioniert nur bei Export mit Stil!

==== Stil ====
In diesem Dialogfenster lassen sich Farben anpassen (Farben aus Ausklappliste auswählen oder als HEX-Code eingeben)

Hintergrundfarbe, Schriftfarbe, Überschrift 1 und Hervorhebungen in Überschriften lassen sich so festlegen. Sind die Standardwerte gesetzt, so kann man weiterhin über class: invert die Invertierung aktivieren. Man kann natürlich auch über das Menü ein eigenes dunkles Schema entwickeln. Wichtig ist aber in diesem Falle, die Farbkombination vorab visuell prüfen zu lassen.

Neben der Farbanpassung kann auch die Schriftart für den Text aus einer Ausklappliste gewählt werden.
[[Datei:StilMarpMenue.png|alternativtext=Stil Dialog Marp-Menü|rahmenlos|500x500px]]
Diese Anpassungen greifen nur, wenn Exportieren mit Stil gewählt wird.

Datei:StilMarpMenue.png

2026-06-03T14:27:28Z

Henn:

Stil Dialog Marp-Menü