Übersicht

Eduskript erweitert Markdown um interaktive Komponenten. Dieses Skript ist die Referenz für alle eingebauten Komponenten, mit vollständiger Syntax, Optionen und Beispielen.

Wie Komponenten funktionieren

Eine Komponente ist ein spezieller Block in deinem Markdown — entweder ein Fenced-Code-Block mit einem Schlüsselwort oder ein eigenes HTML-Element. Der Renderer wandelt sie auf der Seite in eine React-Komponente um, oft mit interaktivem Verhalten (Code ausführen, eine Datenbank abfragen, auf dem Canvas zeichnen).

Markdown → AST-Transformation → Eigenes HTML-Element → React-Hydration → Interaktive Komponente

Du musst das nicht wissen, um Komponenten zu benutzen — aber es erklärt, warum es zwei syntaktische Konventionen gibt (Markdown und HTML) und warum es gewisse Einschränkungen gibt.

Die zwei Komponenten-Syntaxen

Markdown-Stil (bevorzugt für Codeblöcke)

```python editor
print("Hello")
```

Wird für Code-Editoren und Codeblöcke verwendet. Kompakt, natürlich zu lesen.

HTML-Stil (für alles andere, plus zusätzliche Optionen bei Code-Editoren)

<code-editor data-language="python" data-code="print('Hello')"></code-editor>

Wird für Komponenten ohne klares Markdown-Äquivalent verwendet (Callouts haben mit > [!type] ein Markdown-Äquivalent, aber Quiz, Tabs, Plugins und eigene Elemente nutzen HTML).

HTML-Regeln — strikt

Jedes eigene HTML muss aus Kleinbuchstaben-Tags mit kleingeschriebenen, string-gequoteten Attributen bestehen. Kein PascalCase, keine JSX-Ausdrücke.

• ✅ <question id="q1" type="single">
• ❌ <Question id="q1" type="single"> (PascalCase-Tag — wird nicht gerendert)
• ❌ <question initialCount={7}> (JSX-Ausdruck — schreibe stattdessen initialcount="7")

Standard-HTML-Elemente (<div>, <span>, <p>, <h1> usw.) funktionieren auch — nützlich für Layout und Inline-Styling.

Kurzer Rundgang durch die eingebauten Komponenten

Callout

> [!tip] Pro-Tipp
> Callouts heben wichtige Informationen hervor.

Pro-Tipp

Callouts heben wichtige Informationen hervor.

Mathe

Inline: $E = mc^2$ — Block:

$\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$

Codeblock (nur lesbar)

def greet(name):
    return f"Hello, {name}!"

Code-Editor (ausführbar)

message = "Hello from Eduskript!"
print(message)

Automatisch bewertete Übung

Ein Code-Editor + ein python-check-Block, der den Code des Schülers bewertet:

def square(x):
    return x * 2  # wrong

# Example
print("The area of a square with side 3 is:", square(3))

SQL-Editor

Frag eine SQLite-Datenbank im Browser ab. Das Beispiel unten holt die fünf zuletzt veröffentlichten TV-Serien aus netflix.db — sortiert nach release_date absteigend, begrenzt auf 5 Zeilen. Versuch, das LIMIT zu ändern oder tv_show durch movie zu ersetzen:

SELECT title, release_date
FROM tv_show
ORDER BY release_date DESC
LIMIT 5;

Video

![Eine kurze Bildunterschrift](my-video.mp4)

Eigenes Plugin

<plugin src="marie/mod-clock" mod="7"></plugin>

Quiz (Einzelauswahl)

<question id="q1" type="single" points="1">
Was ist 2 + 2?
<answer>3</answer>
<answer correct="true">4</answer>
<answer>5</answer>
</question>

Tabs

<tabs-container>
  <tab-item label="Python">Python-Inhalt</tab-item>
  <tab-item label="JavaScript">JavaScript-Inhalt</tab-item>
</tabs-container>

Eigenes CSS

<style>
  .my-class { color: red; }
</style>

Kleine Komponenten

Eine Handvoll Komponenten sind einfach genug, um keine eigene Seite zu brauchen.

CTA-Button

Ein Link im Theme der Seite, gestylt wie ein Button — zeichne einen Button nie als Bild:

<cta href="/auth/signup">Konto kostenlos erstellen</cta>

Self-closing mit label statt Kindelementen funktioniert auch, dazu variant (default/secondary/outline/ghost), size (lg/default/sm) und align (center/left/right):

<cta href="/pricing" label="Pläne ansehen" variant="outline" size="sm" align="center" ></cta>

Spacer

Eine leere Fläche, auf der Schüler von Hand mit den Stiften lösen — checkered ergibt kariertes Papier:

<spacer pattern="checkered" height="200" id="sp1" ></spacer>

pattern ist checkered, lines, dots oder blank. Der Editor bietet Grössenänderung per Drag plus eine Muster-/Löschen-Toolbar; publiziert wird eine einfache gemusterte Box.

Newsletter

E-Mail-Erfassung, verbunden mit der Brevo-Liste der Site, die Bestätigung und Abmeldung übernimmt:

<newsletter title="Auf dem Laufenden bleiben" description="Neue Seiten, hin und wieder." button="Anmelden" ></newsletter>

title, description und button sind alle optional.

Kurzreferenz

Der Rest dieses Skripts behandelt jede eingebaute Komponente im Detail.