Beispielseite

▻

Diese Seite zeigt an einem Stück Text, was das Lehrbuch-System aus reinem Markdown machen kann: Buch-Ansicht, Folien-Ansicht und Quiz — alles aus derselben Datei.

▻

Textformatierung

Markdown kennt fett, kursiv und inline code, dazu Links, Aufzählungen und nummerierte Listen:

• Unsortierte Liste, Punkt eins
• Unsortierte Liste, Punkt zwei
  • verschachtelt geht auch

1. Erster Schritt
2. Zweiter Schritt
3. Dritter Schritt

Blockquotes eignen sich für Zitate oder Hinweise, die aus dem Fließtext hervorgehoben werden sollen.

Sprache	Läuft im Browser	Läuft am Server
HTML/CSS	ja	nein
JavaScript	ja	ja (Node)
PHP	nein	ja

▻

Code-Beispiele

Codeblöcke mit title="…" bekommen einen Rahmen mit Titelzeile, Copy-Button und passendem Farbschema für Hell/Dunkel-Modus:

begruessung.js

function begruesse(name) {
  return `Hallo, ${name}!`;
}

console.log(begruesse("Welt"));

Mit ::::compare stehen zwei Codeblöcke nebeneinander, zum Beispiel Quelltext und das Ergebnis der Übersetzung:

zaehler.ts

let zaehler: number = 0;

function erhoehen(): number {
  zaehler += 1;
  return zaehler;
}

zaehler.js (kompiliert)

let zaehler = 0;

function erhoehen() {
  zaehler += 1;
  return zaehler;
}

▻

Diagramm

Mermaid-Diagramme werden direkt im Browser gerendert, im Buch wie in der Folienansicht:

sequenceDiagram actor N as Nutzer*in participant B as Browser participant S as Server N->>B: Klick auf Link B->>S: HTTP Request S-->>B: HTTP Response (HTML) B->>B: Seite darstellen

▻

Explizite Folienteiler

Jede Überschrift (h1–h3) beginnt automatisch eine neue Folie. Mitten in einem Abschnitt kann man mit ::slide zusätzlich manuell umbrechen — der Buchtext bleibt dabei ein durchgehender Abschnitt:

Das ist noch der erste Teil dieses Abschnitts.

▻

Und das hier landet in der Folienansicht bereits auf der nächsten Folie, obwohl im Buch keine neue Überschrift beginnt.

▻

Quiz

Quizfragen entstehen aus :::quiz-Blöcken; jede Frage wird in der Folienansicht automatisch zu einer eigenen Folie. Falsche Antworten können individuelles Feedback bekommen:

▻

Womit erzeugt man in Markdown kursiven Text?

• **kursiv**

  Zwei Sternchen erzeugen fetten Text, keinen kursiven.

• *kursiv*
• __kursiv__

  Doppelte Unterstriche erzeugen ebenfalls fetten Text.

• <i>kursiv</i>

▻

Womit kann man mitten in einem Abschnitt manuell eine neue Folie erzwingen, ohne eine neue Überschrift zu beginnen?

• :::notes

  :::notes erzeugt Sprechernotizen, keine neue Folie.

• ::slide
• Ein einfacher Zeilenumbruch

  Ein Zeilenumbruch trennt nur Zeilen, keine Folien.

• ::::compare

  ::::compare stellt zwei Codeblöcke nebeneinander, teilt aber keine Folie.

---

Optionale Erklärung: jede Frage ist Single-Choice — genau eine Antwort ist richtig.

▻

Quiz-Fortschritt

0 / 0 Fragen beantwortet (0%)

0 richtig