Decker Anleitung

Folienerstellung - Erweiterte Grundstrukturen

Sebastian Lukas Hauer

Lehrstuhl für Computergraphik, TU Dortmund

🚀 by Decker

Grundkonzept: fenced div

Möchten Sie Paragraphen oder andere Bausteine Ihrer Folien besonders auszeichnen oder einfach nur logisch strukturieren können Sie das Quelltextfragment mit drei Doppelpunkten umzäunen (Zaun - engl. fence) und mit einer Klasse versehen.

::: class

Inhalt

:::

Im übersetzten Resultat wird der umzäunte Folieninhalt in ein HTML-Blockelement namens div eingebettet. Diese nennen wir auch einfach nur Bereiche. Der umzäunende Bereich erhält die angegebene Klasse, deren Stil Sie mithilfe einer passenden CSS-Regel anpassen können.

Bestimmt klassifizierte Bereiche werden von Decker besonders übersetzt. In dieser Anleitung finden Sie eine Übersicht der besonders behandelten Bereiche.

Beispiel: Inkrementelle Listen mit fenced div

Möchten Sie z.B. Listen auf einer Folie nach und nach anzeigen lassen können Sie die Liste in einen incremental-Bereich verpacken.

::: incremental
1. First
2. Second
3. Third
:::
  1. First
  2. Second
  3. Third

Weitere Details für inkrementelle Listen und Folienfragmente finden Sie in dieser Anleitung.

Textabschnitte

Einen beliebigen Textabschnitt im Fließtext können Sie ebenso mit von der Norm abweichenden Eigenschaften versehen. Dazu müssen Sie den Textabschnitt mit eckigen Klammern markieren und auf diese direkt geschweifte Klammern folgen lassen. Ein solcher Textabschnitt wird in einen sogenannten span eingebettet, der eigene CSS-Klassen und HTML-Attribute erhalten kann.

Im Fließtext können Sie [einzelne Textabschnitte]{style="color: red;"} markieren und modifizieren.

Im Fließtext können Sie einzelne Textabschnitte markieren und modifizieren.

Weitere Beispiele für die Anwendung von Textabschnitten finden Sie in der dazugehörigen Anleitung.

Vertikale Abstände

Möchten Sie einen vertikalen Abstand zwischen zwei Elementen einbauen können Sie dies mit folgender modifizierten Linksyntax umsetzen:

Ein einzelner Inhalt auf der Folie

[:vspace](128px)

Ein weiterer Inhalt auf der Folie

Ein einzelner Inhalt auf der Folie

Ein weiterer Inhalt auf der Folie

Die Größe des Abstandes kann in allen gültigen CSS-Einheiten angegeben werden.

Inhalte aus anderen Dateien inkludieren

Wird ein Foliensatz oder eine Webseitendatei zu groß kann es sich lohnen den Inhalt einzelner Kapitel in andere Dateien auszulagern. Dies soll dabei helfen die Übersicht über die Inhalte eines größeren Dokuments zu behalten.

Legen Sie dazu eine neue Datei an und legen Sie an einen passenden Ort in Ihrem Projektverzeichnis ab. Da es sich weiterhin um Markdown-Quellcode handelt bietet sich natürlich die Dateiendung .md an.

Sie können den Inhalt dieser anderen Datei an einer beliebigen Position im Quelltext einbetten, indem Sie einen Link mit dem Linktext :include und dem Pfad zur Datei als Linkpfad verwenden:

[:include](pfad/zur/datei)
Das Ergebnis einer solchen Inklusion kann auf der nächsten Folie betrachtet werden.

Beispiel: Inhalt aus einer anderen Datei

Dieser Text befindet sich zum Beispiel in einer anderen Datei und wurde durch

[:include](parts/include-example.md)

an dieser Stelle eingefügt.

Der Text wird verbatim eingesetzt. Das heißt, der Quelltext der inkludierten Datei wird so behandelt, als sei sie direkter Teil der inkludierenden Datei.