Deine Inhalte schreiben

Der Eduskript-Editor ist zweigeteilt: Markdown-Quelltext links, Live-Vorschau rechts. Während du tippst, aktualisiert sich die Vorschau in Echtzeit. Beide Bereiche scrollen synchron — scrollst du im Quelltext, folgt die Vorschau, und umgekehrt.

Der Editor im Überblick

Die Toolbar deckt die Grundlagen ab: Fett, Kursiv, Überschriften, Listen, Links, Bilder, Codeblöcke, Callouts, Mathe, Farbauswahl, Datei-Einfügungen. Die meisten Lehrpersonen finden zu einem Workflow, bei dem sie Markdown für Kleinigkeiten von Hand tippen und für die grösseren Komponenten (Excalidraw-Zeichnungen, Code-Editoren, Callouts) auf die Toolbar klicken.

Standard-Markdown — was wie erwartet funktioniert

Eduskript nutzt CommonMark + GitHub-Flavored Markdown als Basis und fügt darauf eigene Erweiterungen hinzu.

Überschriften sind speziell — sie erzeugen automatisch die Seitengliederung (Inhaltsverzeichnis in der rechten Seitenleiste) und werden zu Anker-Links, die du direkt teilen kannst.

Hover-Toolbars in der Vorschau

Bewege die Maus über gerenderten Inhalt in der Vorschau, und kontextabhängige Toolbars erscheinen:

• Bild hovern → Grössenanpassungs-Griffe, Ausrichtungs-Buttons, Alt-Text-Editor
• Code-Editor hovern → Pfeile für „Insert above / below", Einstellungen bearbeiten (id, language, db)
• Excalidraw-Zeichnung hovern → „Open in editor", um sie zu bearbeiten
• Callout hovern → Typ ändern, zwischen eingeklappt/ausgeklappt umschalten
• Video hovern → Poster-Auswahl, Autoplay-/Loop-Schalter

Das ist der schnellste Weg, eine Komponente anzupassen, sobald sie auf der Seite ist — du musst dir keine Attribut-Syntax merken.

Die Funktionen der oberen Leiste

AI-Edit-Chat

Klick auf das Zauberstab-Symbol (✨) — den äussersten linken Button in der Editor-Toolbar —, um AI Edit zu öffnen. Es ist ein echtes Gespräch, kein Einmal-Befehl: Beschreib, was du willst, sprich weiter, um es zu verfeinern, und es erinnert sich innerhalb dieser Sitzung an das, was du bereits verlangt hast.

„Füge oben einen Callout mit den Lernzielen ein."

„Übersetze diese Seite ins Französische und lass alle Codeblöcke unverändert."

„Füge der FizzBuzz-Übung einen python-check hinzu, der n=15, 30 und 100 testet."

Jede vorgeschlagene Änderung erscheint als Inline-Karte im Chat: ein kurzer einleitender Satz, der erklärt, was geändert wurde, gefolgt von einem Diff.

Ask vs. Auto

Ein Schalter im Chat steuert, wie Änderungen auf der Seite landen:

• Ask — prüf jede Änderung einzeln. Jede Karte bekommt Accept, Reject oder Respond (Feedback geben und nochmals versuchen lassen). Nichts wird an deiner Seite verändert, bis du zustimmst.
• Auto — die AI schreibt jede Änderung direkt auf die Seite, sobald sie vorgeschlagen wird. Reject auf einer Karte macht genau diese Änderung rückgängig.

Ein Stop-Button bricht die Generierung mitten im Stream ab, falls es in die falsche Richtung geht.

Der Chat setzt sich zurück, deine Änderungen nicht

Das Schliessen des Tabs oder der Wechsel zu einer anderen Seite setzt das Gespräch zurück — der Verlauf geht verloren. Alles, was bereits akzeptiert (Ask-Modus) oder angewendet (Auto-Modus) wurde, bleibt auf der Seite erhalten; es wird wie jede andere Änderung gespeichert.

Verfügbarkeit

Der AI-Edit-Chat ist ein kostenpflichtiges Feature — für Gratis-Accounts gesperrt.

Persönliche und organisationsweite System-Prompts

Leg unter Account settings → AI system prompt einen persönlichen Ton für die AI fest — z.B. „Schreibe immer auf Deutsch (Sie-Form für Schüler)" oder „Bevorzuge knappe Erklärungen statt langer Einleitungen." Organisations-Owner können unter Organization settings einen organisationsweiten System-Prompt setzen, um über alle Lehrpersonen der Organisation hinweg einen einheitlichen Ton durchzusetzen.

Zwei Wege, dasselbe zu schreiben

Für die meisten Dinge kannst du Markdown ODER HTML verwenden. Markdown ist kürzer; HTML erlaubt dir, zusätzliche Attribute zu setzen.

![Ein Fischschwarm](fish.jpg)

<image src="fish.jpg" alt="Ein Fischschwarm" width="50%" align="right" wrap ></image>

Beide rendern ein Bild. Die erste Variante nutzt die volle Breite der Datei. Die zweite lässt das Bild bei 50% Breite rechts fliessen, mit Textumfluss.

Dasselbe gilt für Code-Editoren, Videos, Callouts, Plugins — wähle, was sich für den jeweiligen Fall natürlicher anfühlt.

Regeln für Custom-HTML

Eduskripts eigene Komponenten müssen klein geschrieben sein, mit string-gequoteten Attributwerten. Kein JSX, kein PascalCase.

• ✅ <code-editor data-language="python">
• ❌ <CodeEditor language="python"> (PascalCase)
• ❌ <code-editor data-id={pageId}> (JSX-Ausdruck)

Die meisten modernen Browser tolerieren Grossbuchstaben-Tags, aber Eduskripts Renderer normalisiert vor dem Parsen alles auf Kleinschreibung.

Frontseiten

Neben gewöhnlichen Seiten kannst du eine Frontseite für deine öffentliche Site, für eine Collection oder für ein Skript schreiben — eine massgeschneiderte Landingpage, die gezeigt wird, bevor ein Besucher zur Seitenliste gelangt. Es ist derselbe Split-Pane-Editor, dasselbe Markdown und dieselben Komponenten; sie wird nur an der Wurzel gerendert (/<slug>, dem Einstieg einer Collection oder dem Einstieg eines Skripts) statt bei einem bestimmten Seiten-Slug.

Nutze eine Frontseite als „Eingangstür": eine Einführung, ein Lehrplan, ein Klassenfoto — was auch immer einen Besucher zuerst begrüssen soll, bevor er in einzelne Seiten eintaucht.

Eigenes CSS

Für Formatierungen, die die eingebauten Komponenten nicht abdecken, füge einen gescopten <style>-Block direkt in den Seiteninhalt ein:

<style>
.callout-highlight { border-left: 4px solid orange; padding-left: 1rem; }
</style>

<div class="callout-highlight">Eine Box mit eigenem Stil.</div>

Styles sind auf die Seite beschränkt — sie sickern nicht durch und beeinflussen keine anderen Seiten. Inline-style="..." funktioniert genauso bei jedem Element:

<p style="text-align: center; font-style: italic;">Zentrierter, kursiver Text.</p>

Greif zu eigenem CSS, wenn dir Callouts, Flex-Layouts und die Farbpalette nicht mehr reichen — es ist ein Notausgang, nicht das Standardwerkzeug.

Entwürfe speichern automatisch, und Versionsverlauf

Jede Änderung an einer Seite wird automatisch gespeichert. Du kannst zusätzlich:

• Manuell eine Version erstellen — fügt einen beschrifteten Snapshot zum Versionsverlauf hinzu
• Eine ältere Version wiederherstellen — wählt einen alten Snapshot aus und ersetzt den aktuellen Entwurf
• Automatische Versionen alle 100 Tastenanschläge — versehentliche Löschungen sind wiederherstellbar

Den Versionsverlauf findest du im Overflow-Menü (⋯) des Seiteneditors.

Bearbeiten auf Mobile und Tablet

Der Editor ist responsiv. Auf dem Handy klappt die Vorschau in einen Tab zusammen — du wischst zwischen Quelltext und Vorschau. Touch-freundliche Toolbar mit grösseren Trefferflächen. Zeichnen auf der Seite (Annotationen) funktioniert mit Finger oder Stylus.

Trotzdem ist das in erster Linie ein Werkzeug für Lehrpersonen — die eigentliche Arbeit passiert am Schreibtisch. Der mobile Editor ist für Last-Minute-Anpassungen gedacht, nicht fürs vollständige Verfassen einer Lektion.

Gerade Linien und Formen zeichnen

Freihand ist gut für Notizen, weniger für Achsen, Tangenten und Kästen. Zwei Wege zu sauberer Geometrie, beide für alle verfügbar, die auf einer Seite zeichnen — Lehrperson oder Schüler, Maus, Stylus oder Finger:

Das Ergebnis ist ein ganz normaler Strich — Radiergummi, Rückgängig, das Teilen mit einer Klasse und das AI-Feedback behandeln ihn wie alles andere, was du zeichnest.

Gerade Linien bleiben bearbeitbar. Ist weder Stift noch Radiergummi ausgewählt, erscheint beim Hovern über eine gerade Linie an jedem Ende ein Griffpunkt. Zieh an einem Griffpunkt, um dieses Ende zu verschieben, zieh an der Linie selbst, um das Ganze zu verschieben. Kreise, Rechtecke und Freihandstriche lassen sich so nicht bearbeiten — dafür löschen und neu zeichnen.

Produktive Gewohnheiten

Nutze die Toolbar für das, was schwer zu tippen ist

Code-Editoren, Excalidraw-Zeichnungen, Callouts und Farb-Spans haben gerade genug Syntax, dass die Toolbar Zeit spart. Für Fliesstext, Überschriften, Listen und Hervorhebungen tippst du von Hand — das geht schneller.

Überschriften sind deine Gliederung

Nutze ## für Hauptabschnitte und ### für Unterabschnitte. Schüler sehen sie in der Gliederung auf der rechten Seite, können zum Sprung anklicken und Anker-Links teilen.

Vorschau auf einem echten Gerät

Klick auf Preview, kopiere die URL, öffne sie auf deinem Handy oder dem Laptop einer Kollegin oder eines Kollegen. So findest du Schriftgrössen- und Layout-Probleme, die nur bei bestimmten Breiten auftreten.