OER-Snippets

Cheatsheet für Quarto-Markdown

File

Diese Seite stellt die wesentlichen Elemente für die Gestaltung von Quarto-Dokumenten zusammen, die sich insbesondere aber nicht nur für die Erarbeitung von offenen Lehr- und Lernmaterialien eignen.

Author

Kai-Christian Bruhn

Veröffentlicht am

23.01.2026

Zuletzt geändert am

15.04.2026

Stichwörter

Branding, Corporate Design

Download als .qmd-Datei

Diese Datei können Sie auch direkt aus dem Repository in .qmd herunterladen und in anderen Projekten nutzen oder über den </> qmd-Button oben rechts auf dieser Seite einzelne Abschnitte des Markwdowns dieser Seite aufrufen.

1 Vorbemerkungen

Hier sind einige in der Dokumentation von Quarto versteckte Möglichkeiten zusammengestellt, Lehr- und Lernmaterialien abwechslungsreich zu gestalten.

Der Abschnitt Markdown-Basics aus der Quarto-Dokumentation wird hier nicht zusammengefasst und wird zur Lektüre ausdrücklich empfohlen.

2 Barrierefreiheit

Quarto setzt konsequent HTML5-Standards um und ermöglicht die Erstellung sehr barrierearmer Lehrmaterialien. Folgendes sollte beim Verfassen von .qmd-Dateien berücksichtigt werden:

Überschriften-Hierarchie: Pro Seite genau ein H1 (kommt i.d.R. vom title), danach H2/H3 … ohne Sprünge. Abschnitte im qmd starten also mit ## h2
Aussagekräftige Linktexte:
- “weitere Informationen finden sie im Datenportal des Anbieters”” statt
- “weitere Informationen finden sie hier.”
Fremdsprachige Inhalte mit inline: <span lang="en">…</span> auszeichnen
Alternativtexte: Jede inhaltstragende Grafik hat alt/fig-alt; rein dekorative Bilder haben leeres alt="".

![Text](../img/placeholder.png): Der Text in eckigen Klammern wird als fig-caption gerendert.

![Text](../img/placeholder.png){fig-alt="Illustration eines Platzhalters."}: Bild mit fig-caption und alt-text.

![Text](../img/placeholder.png "Ein Platzhalter"){fig-alt="Illustration eines Platzhalters."}: Bild mit fig-caption, title (erscheint beim hovern) und alt-text.

Text

Ein einfacher Accessibility-Check kann beim Rendern mit

format:
  html:
    axe: true

im Header der qmd-Datei ausgelöst werden.

Ausführliche Informationen in der Quarto-Dokumentation. Beachten Sie auch Abschnitt 3.4 unten.

3 Strukturierende Elemente

3.1 Callouts

Titel

Callout-Notiz

::: {.callout-note title="Titel"}

Callout-Notiz

:::

3.2 Spalten

Zwei einfache Spalten mit layout-ncol:

Erste Spalte

Zweite Spalte

::: {layout-ncol=2}

Erste Spalte

Zweite Spalte

:::

Zwei Spalten mit .columns:

Linke Spalte (20%)

Rechte Spalte (80%)

::::: {.columns}

::: {.column width="20%"}

Linke Spalte (20%)

:::

::: {.column width="80%"}

Rechte Spalte (80%)

:::

:::::

Inhalte mit layout="" anordnen:

oben links

oben rechts

unten

::: {layout="[[1,1], [1]]"}

oben links

oben rechts

unten

:::

3.3 Fußnoten

..., rhoncus congue sapien finibus mollis[^anmerkung]. Ut eu sem laoreet, ...

[^anmerkung]: Hier ist etwas anzumerken. Die Zählung ist automatisiert.

3.4 Begriffsdefinitionen und Abkürzungen

HTML bietet die Möglichkeit, Begriffe und Abkürzungen maschinenlesbar und barrierearm bereitzustellen:

Begriff
: Definition

wird gerendert als

Begriff: Definition

und erzeugt diese HTML-Ausgabe:

<dl>
  <dt>Begriff</dt>
  <dd>Definition</dd>
</dl>

<dfn><abbr title="Forschungsdatenmanagement">FDM</abbr></dfn> im Fließtext wird so: FDM gerendert und liefert beim Hovern mit der Maus die Auflösung der Abkürzung.

Das HTML dazu:

<dfn>
    <abbr title="Forschungsdatenmanagement">FDM</abbr>
</dfn>

Es können aber auch einfache Abk. ohne Definition in den Fließtext integriert werden.

Es können aber auch einfache <abbr title="Abkürzung">Abk.</abbr> ohne Definition in den Fließtext integriert werden.

4 Interaktiv

4.1 ObservableJS

Für die Einbettung von ObservableJS sind in Quarto keine zusätzlichen Laufzeitumgebungen erforderlich. Der JavaScript-Code wird clientseitig im Browser ausgeführt und ist Bestandteil des gerenderten HTML-Dokuments. Dadurch lassen sich interaktive und didaktische Elemente ohne zusätzliche Installationen integrieren, was die Zugänglichkeit, Nachnutzbarkeit und didaktische Gestaltung von OER-Materialien deutlich verbessert.

Mit ObservableJS lassen sich zahlreiche interaktive didaktische Elemente umsetzen, die häufig mit plattformgebundenen H5P-Inhalten realisiert werden[^h5p].

[^h5p]: H5P ist als Software offen lizenziert. In der Praxis erfolgt die Erstellung und Nutzung von H5P-Inhalten jedoch häufig über spezifische Lernplattformen oder gehostete Dienste. Dadurch entstehen funktionale Abhängigkeiten von Plattformen, Editoren und Update-Zyklen, die sich von der Nutzung systemunabhängiger, statischer Webinhalte unterscheiden.

Multiple Choice

Aufgabe: Wählen Sie den Begriff, der ein Dateiformat beschreibt.

viewof begriff = Inputs.select(
  ["", "Python", "Datenbank", "jpeg"],
  { label: "Auswahl" }
)

begriff === ""
  ? html``
  : begriff === "jpeg"
    ? html`<p>Richtig! <strong>${begriff}</strong> ist ein Dateiformat.</p>`
    : html`<p>Leider nicht richtig: Prüfen Sie, ob <strong>${begriff}</strong> ein Dateiformat ist.</p>`

ObservableJS-Code:

Aufgabe: Wählen Sie den Begriff, der ein Dateiformat beschreibt.

```{ojs code-copy=false}
//| echo: false

viewof begriff = Inputs.select(
  ["", "Python", "Datenbank", "jpeg"],
  { label: "Auswahl" }
)

begriff === ""
  ? html``
  : begriff === "jpeg"
    ? html`<p>Richtig! <strong>${begriff}</strong> ist ein Dateiformat.</p>`
    : html`<p>Leider nicht richtig: Prüfen Sie, ob <strong>${begriff}</strong> ein Dateiformat ist.</p>`
```

4.2 IIIF Image Viewer

HTML-Code für IIIF Image Viewer

<!-- OpenSeadragon laden -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/openseadragon.min.js"></script>

<!-- Container für den Viewer erzeugen -->
<div id="openseadragon-viewer" style="width: 100%; height: 500px;"></div>

<script>
// OpenSeadragon viewer initialisieren
var viewer = OpenSeadragon({
  id: "openseadragon-viewer",
  prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/images/",
  tileSources: "https://heidicon.ub.uni-heidelberg.de/iiif/2/201277%3A218424/info.json",
  showNavigator: true,
});
</script>

5 Gestaltende Elemente

5.1 Bilder

Zu barrierearmer Auszeichnung von Bildern vgl. Abschnitt 2

Eingebundenes Bild mit vollständigem Nachweis

5.2 Emojis und Symbole

Hinweis

Benötigt

from: markdown+emoji

Im Header der qmd-Datei.

Shortcode	Darstellung
`:bell:`	🔔
`:tada:`	🎉
`:mag:`	🔍
`:white_check_mark:`	✅
`:x:`	❌
`:bangbang:`	‼️
`:one:`	1️⃣
`:two`	2️⃣
`:arrow_forward:`	▶️
`:floppy_disk:`	💾
`:no_entry:`	⛔
`:page_facing_up:`	📄
`:notebook:`	📓
`:book:`	📖
`:computer:`	💻
`:sparkles:`	✨
`:star:`	⭐
`:exclamation:`	❗
`:question:`	❓
`:+1:`	👍
`:information_desk_person:`	💁

5.3 Layout

5.3.1 Workaround für Textumlauf um Bilder:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis posuere ligula sit amet lacinia. Duis dignissim pellentesque magna, rhoncus congue sapien finibus mollis. Ut eu sem laoreet, vehicula ipsum in, convallis erat. Vestibulum magna sem, blandit pulvinar augue sit amet, auctor malesuada sapien. Nullam faucibus leo eget eros hendrerit, non laoreet ipsum lacinia. Curabitur cursus diam elit, non tempus ante volutpat a. Quisque hendrerit blandit purus non fringilla. Integer sit amet elit viverra ante dapibus semper. Vestibulum viverra rutrum enim, at luctus enim posuere eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

::: {style="float: right; margin: 5px;"}


![Text](/img/placeholder.png "Ein Platzhalter"){fig-alt="Illustration eines Platzhalters." width="250"}

:::

Ihr Absatztext

5.4 Anmerkungen in der rechten Spalte

Anmerkungen und mobile Geräte

Auf mobilen Geräten werden die Anmerkungen aus column-margin oder aus Spans mit der Klasse aside häufig nicht dargestellt.

Mit {.column-margin} können MarkDown-Texte in die rechte Spalte geschrieben werden

::: {.column-margin}

Mit {.column-margin} können *Mark**Down***-Texte in die rechte Spalte geschrieben werden

:::

Ein span mit der Klasse aside, dessen Inhalt am Rand platziert wird.

[Ein span mit der Klasse aside, dessen Inhalt am Rand platziert wird:]{.aside}

5.5 Optionen von page-layout: article

Dieses Dokument hat die Einstellung page-layout: article ( in der _layout.yml). Damit stehen einige weitere Optionen für die Gestaltung zur Verfügung:

Position und Breite des Inhaltsbereichs

::: {.column-body-outset}

:::

::: {.column-page}

:::

::: {.column-screen}

:::

::: {.column-screen-inset}

:::

::: {.column-body-outset-right}

:::

::: {.column-page-inset-right}

:::

::: {.column-page-right}

:::

::: {.column-screen-inset-right}

:::

::: {.column-screen-right}

:::

::: {.column-body-outset-left}

:::

::: {.column-page-inset-left}

:::

::: {.column-page-left}

:::

::: {.column-screen-inset-left}

:::

::: {.column-screen-left}

:::

Fußnoten

Hier ist etwas anzumerken.↩︎

Lizenz

CC BY 4.0

Urheber:innen

Kai-Christian Bruhn

--- title: OER-Snippets subtitle: Cheatsheet für Quarto-Markdown description: | Diese Seite stellt die wesentlichen Elemente für die Gestaltung von Quarto-Dokumenten zusammen, die sich insbesondere aber nicht nur für die Erarbeitung von offenen Lehr- und Lernmaterialien eignen. abstract: "" abstract-title: "" categories: - File keywords: - Branding - Corporate Design date: 2026-01-23 date-modified: last-modified date-format: "DD.MM.YYYY" author: - name: given: Kai-Christian family: Bruhn copyright: "Kai-Christian Bruhn" license: CC BY # Optionen für Lizensierungsangaben: https://quarto.org/docs/authoring/front-matter.html#license toc: true toc-location: left number-sections: true html: page-layout: article execute: freeze: false --- ::: {.callout-note title="Download als .qmd-Datei"} Diese Datei können Sie auch [direkt aus dem Repository in .qmd]({{< meta data-url >}}quarto-oer-snippets.qmd) herunterladen und in anderen Projekten nutzen oder über den <kbd></> qmd</kbd>-Button oben rechts auf dieser Seite einzelne Abschnitte des Markwdowns dieser Seite aufrufen. ::: ## Vorbemerkungen Hier sind einige in der Dokumentation von Quarto versteckte Möglichkeiten zusammengestellt, Lehr- und Lernmaterialien abwechslungsreich zu gestalten. Der Abschnitt [Markdown-Basics](https://quarto.org/docs/authoring/markdown-basics.html) aus der Quarto-Dokumentation wird hier nicht zusammengefasst und wird zur Lektüre ausdrücklich empfohlen. ## Barrierefreiheit {#sec-barrierefreiheit} Quarto setzt konsequent HTML5-Standards um und ermöglicht die Erstellung sehr barrierearmer Lehrmaterialien. Folgendes sollte beim Verfassen von `.qmd`-Dateien berücksichtigt werden: - Überschriften-Hierarchie: Pro Seite genau ein H1 (kommt i.d.R. vom title), danach H2/H3 … ohne Sprünge. Abschnitte im qmd starten also mit `## h2` - Aussagekräftige Linktexte: - "weitere Informationen finden sie [im Datenportal des Anbieters](#)"" statt - "weitere Informationen finden sie [hier](*)." - Fremdsprachige Inhalte mit inline: `<span lang="en">…</span>` auszeichnen - Alternativtexte: Jede inhaltstragende Grafik hat `alt`/`fig-alt`; rein dekorative Bilder haben leeres `alt=""`. `![Text](../img/placeholder.png)`: Der Text in eckigen Klammern wird als `fig-caption` gerendert. `![Text](../img/placeholder.png){fig-alt="Illustration eines Platzhalters."}`: Bild mit `fig-caption` und `alt-text`. `![Text](../img/placeholder.png "Ein Platzhalter"){fig-alt="Illustration eines Platzhalters."}`: Bild mit `fig-caption`, `title` (erscheint beim hovern) und `alt-text`. ![Text](../img/placeholder.png "Ein Platzhalter"){fig-alt="Illustration eines Platzhalters." width="200px"} Ein einfacher Accessibility-Check kann beim Rendern mit ```{.yaml} format: html: axe: true ``` im Header der qmd-Datei ausgelöst werden. Ausführliche Informationen in der [Quarto-Dokumentation](https://quarto.org/docs/output-formats/html-accessibility.html). Beachten Sie auch @sec-definitionen unten. ## Strukturierende Elemente ### Callouts ::: {.callout-note title="Titel"} Callout-Notiz ::: ```markdown ::: {.callout-note title="Titel"} Callout-Notiz ::: ``` ### Spalten **Zwei einfache Spalten mit `layout-ncol`:** ----- ::: {layout-ncol="2"} Erste Spalte Zweite Spalte ::: ------ ```markdown ::: {layout-ncol=2} Erste Spalte Zweite Spalte ::: ``` **Zwei Spalten mit `.columns`:** ------ ::::: {.columns} ::: {.column width="20%"} Linke Spalte (20%) ::: ::: {.column width="80%"} Rechte Spalte (80%) ::: ::::: ------ ```markdown ::::: {.columns} ::: {.column width="20%"} Linke Spalte (20%) ::: ::: {.column width="80%"} Rechte Spalte (80%) ::: ::::: ``` **Inhalte mit `layout=""` anordnen:** ------ ::: {layout="[[1,1], [1]]"} oben links oben rechts unten ::: ------ ```markdown ::: {layout="[[1,1], [1]]"} oben links oben rechts unten ::: ``` ### Fußnoten Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis posuere ligula sit amet lacinia. Duis dignissim pellentesque magna, rhoncus congue sapien finibus mollis[^anmerkung]. Ut eu sem laoreet, vehicula ipsum in, convallis erat. Vestibulum magna sem, blandit pulvinar augue sit amet, auctor malesuada sapien. Nullam faucibus leo eget eros hendrerit, non laoreet ipsum lacinia. [^anmerkung]: Hier ist etwas anzumerken. ```markdown ..., rhoncus congue sapien finibus mollis[^anmerkung]. Ut eu sem laoreet, ... [^anmerkung]: Hier ist etwas anzumerken. Die Zählung ist automatisiert. ``` ### Begriffsdefinitionen und Abkürzungen {#sec-definitionen} HTML bietet die Möglichkeit, Begriffe und Abkürzungen maschinenlesbar und barrierearm bereitzustellen: ```markdown Begriff : Definition ``` wird gerendert als Begriff : Definition und erzeugt diese HTML-Ausgabe: ```{.html} <dl> <dt>Begriff</dt> <dd>Definition</dd> </dl> ``` ----- `<dfn><abbr title="Forschungsdatenmanagement">FDM</abbr></dfn>` im Fließtext wird so: <dfn><abbr title="Forschungsdatenmanagement">FDM</abbr></dfn> gerendert und liefert beim Hovern mit der Maus die Auflösung der Abkürzung. Das HTML dazu: ```{.html} <dfn> <abbr title="Forschungsdatenmanagement">FDM</abbr> </dfn> ``` Es können aber auch einfache <abbr title="Abkürzung">Abk.</abbr> ohne Definition in den Fließtext integriert werden. `Es können aber auch einfache <abbr title="Abkürzung">Abk.</abbr> ohne Definition in den Fließtext integriert werden.` ## Interaktiv ### ObservableJS Für die Einbettung von ObservableJS sind in Quarto keine zusätzlichen Laufzeitumgebungen erforderlich. Der JavaScript-Code wird clientseitig im Browser ausgeführt und ist Bestandteil des gerenderten HTML-Dokuments. Dadurch lassen sich interaktive und didaktische Elemente ohne zusätzliche Installationen integrieren, was die Zugänglichkeit, Nachnutzbarkeit und didaktische Gestaltung von OER-Materialien deutlich verbessert. Mit ObservableJS lassen sich zahlreiche interaktive didaktische Elemente umsetzen, die häufig mit plattformgebundenen H5P-Inhalten realisiert werden[^h5p]. [^h5p]: H5P ist als Software offen lizenziert. In der Praxis erfolgt die Erstellung und Nutzung von H5P-Inhalten jedoch häufig über spezifische Lernplattformen oder gehostete Dienste. Dadurch entstehen funktionale Abhängigkeiten von Plattformen, Editoren und Update-Zyklen, die sich von der Nutzung systemunabhängiger, statischer Webinhalte unterscheiden. : **Multiple Choice** ----- Aufgabe: Wählen Sie den Begriff, der ein Dateiformat beschreibt. ```{ojs code-copy=false} //| echo: false viewof begriff = Inputs.select( ["", "Python", "Datenbank", "jpeg"], { label: "Auswahl" } ) begriff === "" ? html`` : begriff === "jpeg" ? html`<p>Richtig! <strong>${begriff}</strong> ist ein Dateiformat.</p>` : html`<p>Leider nicht richtig: Prüfen Sie, ob <strong>${begriff}</strong> ein Dateiformat ist.</p>` ``` ----- ObservableJS-Code: ```` Aufgabe: Wählen Sie den Begriff, der ein Dateiformat beschreibt. ```{ojs code-copy=false} //| echo: false viewof begriff = Inputs.select( ["", "Python", "Datenbank", "jpeg"], { label: "Auswahl" } ) begriff === "" ? html`` : begriff === "jpeg" ? html`<p>Richtig! <strong>${begriff}</strong> ist ein Dateiformat.</p>` : html`<p>Leider nicht richtig: Prüfen Sie, ob <strong>${begriff}</strong> ein Dateiformat ist.</p>` ``` ```` ### IIIF Image Viewer ```{=html}  <script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/openseadragon.min.js"></script>  <div id="openseadragon-viewer" style="width: 100%; height: 500px;"></div> <script> // Initialize the OpenSeadragon viewer var viewer = OpenSeadragon({ id: "openseadragon-viewer", prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/images/", tileSources: "https://heidicon.ub.uni-heidelberg.de/iiif/2/201277%3A218424/info.json", showNavigator: true, }); </script> ``` **HTML-Code für IIIF Image Viewer** ```{.html}  <script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/openseadragon.min.js"></script>  <div id="openseadragon-viewer" style="width: 100%; height: 500px;"></div> <script> // OpenSeadragon viewer initialisieren var viewer = OpenSeadragon({ id: "openseadragon-viewer", prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/images/", tileSources: "https://heidicon.ub.uni-heidelberg.de/iiif/2/201277%3A218424/info.json", showNavigator: true, }); </script> ``` ## Gestaltende Elemente ### Bilder Zu barrierearmer Auszeichnung von Bildern vgl. @sec-barrierefreiheit **Eingebundenes Bild mit vollständigem Nachweis**  ### Emojis und Symbole ::: {.callout-tip title="Hinweis"} Benötigt ```yaml from: markdown+emoji ``` Im Header der qmd-Datei. ::: | Shortcode | Darstellung | |-----------------------------|---------------------------| | `:bell:` | :bell: | | `:tada:` | :tada: | | `:mag:` | :mag: | | `:white_check_mark:` | :white_check_mark: | | `:x:` | :x: | | `:bangbang:` | :bangbang: | | `:one:` | :one: | | `:two` | :two: | | `:arrow_forward:` | :arrow_forward: | | `:floppy_disk:` | :floppy_disk: | | `:no_entry:` | :no_entry: | | `:page_facing_up:` | :page_facing_up: | | `:notebook:` | :notebook: | | `:book:` | :book: | | `:computer:` | :computer: | | `:sparkles:` | :sparkles: | | `:star:` | :star: | | `:exclamation:` | :exclamation: | | `:question:` | :question: | | `:+1:` | :+1: | | `:information_desk_person:` | :information_desk_person: | ### Layout #### Workaround für Textumlauf um Bilder: ::: {style="float: right;"} ![Text](/img/placeholder.png "Ein Platzhalter"){fig-alt="Illustration eines Platzhalters." width="250"} ::: {{< lipsum 1 >}} ```markdown ::: {style="float: right; margin: 5px;"} ![Text](/img/placeholder.png "Ein Platzhalter"){fig-alt="Illustration eines Platzhalters." width="250"} ::: Ihr Absatztext ``` ### Anmerkungen in der rechten Spalte ::: {.callout-warning title="Anmerkungen und mobile Geräte"} Auf mobilen Geräten werden die Anmerkungen aus `column-margin` oder aus Spans mit der Klasse `aside` häufig nicht dargestellt. ::: ::: {.column-margin} Mit {.column-margin} können *Mark**Down***-Texte in die rechte Spalte geschrieben werden ::: ```markdown ::: {.column-margin} Mit {.column-margin} können *Mark**Down***-Texte in die rechte Spalte geschrieben werden ::: ``` [Ein `span` mit der Klasse `aside`, dessen Inhalt am Rand platziert wird.]{.aside} ```markdown [Ein span mit der Klasse aside, dessen Inhalt am Rand platziert wird:]{.aside} ``` ### Optionen von *page-layout: article* Dieses Dokument hat die Einstellung `page-layout: article` ( in der `_layout.yml`). Damit stehen einige weitere Optionen für die Gestaltung zur Verfügung: **Position und Breite des Inhaltsbereichs** ::: {.column-body-outset} ```markdown ::: {.column-body-outset} ::: ``` ::: ::: {.column-page} ```markdown ::: {.column-page} ::: ``` ::: ::: {.column-screen} ```markdown ::: {.column-screen} ::: ``` ::: ::: {.column-screen-inset} ```markdown ::: {.column-screen-inset} ::: ``` ::: ::: {.column-body-outset-right} ```markdown ::: {.column-body-outset-right} ::: ``` ::: ::: {.column-page-inset-right} ```markdown ::: {.column-page-inset-right} ::: ``` ::: ::: {.column-page-right} ```markdown ::: {.column-page-right} ::: ``` ::: ::: {.column-screen-inset-right} ```markdown ::: {.column-screen-inset-right} ::: ``` ::: ::: {.column-screen-right} ```markdown ::: {.column-screen-right} ::: ``` ::: ::: {.column-body-outset-left} ```markdown ::: {.column-body-outset-left} ::: ``` ::: ::: {.column-page-inset-left} ```markdown ::: {.column-page-inset-left} ::: ``` ::: ::: {.column-page-left} ```markdown ::: {.column-page-left} ::: ``` ::: ::: {.column-screen-inset-left} ```markdown ::: {.column-screen-inset-left} ::: ``` ::: ::: {.column-screen-left} ```markdown ::: {.column-screen-left} ::: ``` :::