Deckerfolien werden in Markdown geschrieben. Markdown ist eine sehr einfache Auszeichnungssprache, die ursprünglich von John Gruber und Aaron Swartz dazu entworfen wurde, um in HTML-Code übersetzt zu werden und damit das Schreiben von Webartikeln zu vereinfachen.

Der geschriebene Text im Editor des Autors soll nach der Markdown-Philosophie dem visuellen Inhalt des Artikels so ähnlich wie möglich sein. Layout, Positionierung und andere Gestaltungsdetails sollen dabei keine Rolle spielen. Der Autor soll sich vollständig um den Inhalt kümmern können.

Decker erweitert die grundlegende Syntax von Markdown um viele Details, die etwas mehr Kontrolle über die Eigenschaften des Ergebnisses bieten und versucht weiterhin so simpel wie möglich zu bleiben.

Die Folien von Decker werden mithilfe der Javascriptbibliothek Reveal.js im Browser dargestellt.

Reveal erlaubt es Folien nicht nur linear (horizontal, eine Folie nach der anderen) anzuordnen, sondern Folien auch vertikal (untereinander) anzuordnen, um z.B. Folien nach bestimmten Themen geordnet zu sortieren.

Paragraphen und Textauszeichnungen

Ein Paragraph wird in Markdown notiert indem Sie den Text niederschreiben. Einzelne Textabschnitte können im Fließtext mit Sonderzeichen hervorgehoben werden. Ein Textbaustein, der von solchen Sonderzeichen umrandet oder vorangestellt wird erhält eine andere Auszeichnung. Ein Textbaustein, der von jeweils einem * (Asterisk) umgeben wird, wird z.B. betont während ein Textbaustein, der von jeweils zwei * umgeben wird fett gedruckt wird.

Trennungen durch Leerzeilen

Zwei Folienbausteine werden voneinander getrennt, indem sie durch eine leere Zeile im Quelltext voneinander getrennt werden. Vergessen Sie diese werden die beiden Bausteine unter Umständen als zusammenhängend aufgefasst.

Überschriften: #

Eine Raute (#) am Anfgang einer Zeile zeichnet eine Überschrift aus. Die Anzahl an Rauten bestimmten die Überschriftenstufe.

Eine Überschrift der Stufe 1 leitet für Decker eine neue Folie ein.

Blockzitate: >

Ein Paragraph, der mit einer spitzen Klammer eingeleitet wird (>) wird als Blockzitat aufgefasst.

Code: `

Ein Textbaustein, der von einzelnen Abwärzakzenten (`) umgeben wird, wird als Codetext ausgezeichnet und als vorformatierter Text in einem Monospace-Font dargestellt.

Anmerkung: Text kann nicht unterstrichen werden, da er sonst mit einem Link verwechselt werden kann.

Listen können als solche mit Bindestrichen vor jedem Listeneintrag im Quelltext notiert werden:

- First
- Second
- Third

• First
• Second
• Third

Listen, die mit Bindestrichen ausgezeichnet werden sind nicht nummeriert.

Wenn Sie Listenelemente nummerieren wollen können Sie die Listeneinträge mit einer Nummer, gefolgt von einem Punkt notieren:

3. Third
4. Fourth
5. Fifth

3. Third
4. Fourth
5. Fifth

Denken Sie auch weiterhin daran, dass Sie alle Elemente mit Leerzeilen voneinander trennen:

Eine Liste, die ohne Leerzeile auf einen Paragraphen folgt wird Teil des Paragraphen:
- Erstens
- Zweitens

Eine Liste, die ohne Leerzeile auf einen Paragraphen folgt wird Teil des Paragraphen: - Erstens - Zweitens

Eine Liste, die ohne Leerzeile auf einen Paragraphen folgt wird Teil des Paragraphen:

- Erstens
- Zweitens

Sie können Fließtext als Quellcode durch Umranden mit einzelnen Abwärzakzenten (engl. auch “Backtick” genannt) markieren. Ganze Blöcke von vorformatiertem Quellcode können durch Umrandung mit drei Akzenten in eigenen Zeilen markiert werden. Hinter den “öffnenden” drei Akzenten können Sie in geschweiften Klammern angeben welche Programmiersprache Sie verwenden. Dadurch wird die Syntax des Quellcodes passend gehighlightet. Möchten Sie ein Quelltextfragment im Fließtext mit Syntaxhighlighting einer Programmiersprache versehen, so müssen Sie die Sprache als Klasse hinter dem schließenden Akzent in geschweiften Klammern angeben.

Quellcode

``` {.c}
printf("%s", var);
```

Quellcode im Fließtext: `int a = 42;`{.cpp}

Resultat

printf("%s", var);

Der Quelltext für Tabellen soll dem Aussehen einer Tabelle selbst möglichst ähnlich sein.

In der ersten Zeile einer Tabelle definieren Sie die Kopfzeile der Tabellenspalten. Die Spaltenüberschriften werden dabei von vertikalen Strichen ( | ) umrandet und voneinander getrennt. Sie können sich die Striche als die Linien der Tabelle vorstellen. Die zweite Zeile der Tabelle soll die Ausrichtung der Tabelleninhalte repräsentieren und wird ebenso mit vertikalen Strichen (|) umrandet und getrennt:

• :-- richtet die Spalte linksbündig aus,
• :-: richtet die Spalte zentriert aus,
• --: richtet die Spalte rechtsbündig aus.
• --- richtet die Spalte nach Dokumentstandard, meist linksbündig, aus.

Die Anzahl der überschüssigen Bindestriche ist nicht relevant und soll nur beim Lesen der Tabelle im Quellcode helfen.

Den Tabelleninhalt können Sie anschließend unter die Ausrichtungszeile wie die Überschriften mit vertikalen Strichen (|) voneinander getrennt notieren:

| Überschrift | Überschrift | Überschrift |
| ----------: | :---------: | ----------- |
| Inhalt      | Inhalt      | Inhalt      |
| Inhalt      | Inhalt      | Inhalt      |

Resultat

Verweise auf andere Webressourcen können Sie im Quelltext angeben, indem Sie den Linktext mit eckigen Klammern umgeben und auf die eckigen Klammern ([ ]) sofort die URL in runden Klammern (( )) notieren. Möchten Sie als Linktext die Zielressource selbst angeben, können Sie diese in spitzen Klammern (< >) notieren:

Dies ist ein [Link](https://example.org).

Der Link verlinkt auf <https://example.org>.

Dies ist ein Link.

Der Link verlinkt auf https://example.org.

Häufiger wiederverwendete Links können in Markdown noch auf weitere Weisen ausgezeichnet werden. Decker bietet zusätzlich noch Möglichkeiten Linksammlungen, auf die Sie häufiger verweisen, zu verwalten. Die Anleitung dazu finden Sie hier.

Bilder werden in Markdown ähnlich wie Links ausgezeichnet: Sie werden mit einem Ausrufezeichen (!) eingeleitet, gefolgt von der Bildunterschrift in eckigen Klammern ([ ]) und der URL zum Bild in den runden Klammern (( )):

![Bildunterschrift](Link oder Pfad zum Bild)

Bilder versuchen auf einer Folie so viel Platz wie möglich einzunehmen. Die Folien von Decker gehen standardmäßig von einer Zeichenfläche von 1280x720 Pixeln aus, daher sind höherauflösende Bilder häufig zu groß.

Hinter den runden Klammern können Sie in geschweiften Klammern zusätzliche Eigenschaften des Bildes definieren. Breite und Höhe können mit den Attributen width="" und height="" spezifiziert werden. Werte können in allen gültigen CSS-Einheiten angegeben werden.

![Bildunterschrift](URL){width="256px" height="128px"}

Es lohnt sich Bilder in einem Ordner im Projektverzeichnis zu sammeln und zu sortieren.

Damit alle Dateien von Decker in den Webseitenordner public kopiert werden kann man in der decker.yaml-Konfigurationsdatei die Konfigurationsoption static-resource-dirs erweitern und dort den Ordner auflisten.

static-resource-dirs:
    - 'bilder'

Weiteres zu Bildern

Bilder können zudem noch weiter konfiguriert werden - insbesondere um Eigenschaften der Barrierefreiheit anzupassen. Die Syntax für das Einbetten von Bildern in den Folien wird zudem auch für das Einbetten vieler anderer Medienelemente verwendet. Die dazugehörige Anleitung finden Sie hier.

Matheformeln werden im Browser mithilfe der Bibliothek MathJax aus LaTeX-ähnlicher Syntax in barrierearme HTML-Elemente umgewandelt. Der Formelquelltext wird dabei wie in LaTeX mithilfe von einzelnen oder doppelten Dollar-Symbolen umgeben und kann sowohl als alleinstehende Formel oder im Fließtext eingebettet werden.

Display LaTeX

$$\mathcal{A} = \mathbb{B}$$

\[\mathcal{A} = \mathbb{B}\]

Inline Mathemodus

So sei $x \in \mathbb{N}$ und $y \in \mathbb{R} ...$ 

So sei \(x \in \mathbb{N}\) und \(y \in \mathbb{R}\) …

Möchten Sie die Sonderzeichen, die Markdown zum Auszeichnen von Text verwendet als solche im Fließtext darstellen, so müssen Sie die Sonderzeichen mit einem Gegenschrägstrich (engl. backslash) notieren. Dieses Verfahren nennt man auch escapen. Das Dollar-Symbol für Matheformeln muss doppelt escaped werden:

Diese Sonderzeichen sind Teil des Textes: \* \\$ \` \` \\$ \*

Diese Sonderzeichen sind Teil des Textes: * \$ ` ` \$ *