Interaktives Unterrichtsmaterial, das dir gehört

Code-Blöcke

Zeige Code mit Syntaxhervorhebung an (schreibgeschützt). Für ausführbaren, editierbaren Code siehe das nächste Kapitel zu Code-Editoren.


Grundsyntax

Verwende Code-Blöcke mit dreifachen Backticks. Die Sprachkennung nach dem öffnenden Zaun aktiviert die Syntaxhervorhebung.

```python
def factorial(n):
    if n <= 1:
        return 1
    return n * factorial(n - 1)
```
def factorial(n):
    if n <= 1:
        return 1
    return n * factorial(n - 1)

Ein Kopieren-Button erscheint in der oberen rechten Ecke jedes Code-Blocks, wenn der Schüler mit der Maus darüberfährt.


Unterstützte Sprachen

Eduskript verwendet highlight.js für die Syntaxhervorhebung und unterstützt von Haus aus Hunderte von Sprachen. Gängige:

SpracheKennung(en)
Pythonpython, py
JavaScriptjavascript, js
TypeScripttypescript, ts
SQLsql
HTMLhtml, xml
CSScss, scss
Javajava
C / C++c, cpp
Gogo
Rustrust
Bashbash, sh, shell
JSONjson
YAMLyaml, yml
Markdownmarkdown, md
Diffdiff
Klartext(Sprache weglassen)

Nicht erkannte Sprachen werden schlicht (ohne Farben) dargestellt.


Klartext (ohne Hervorhebung)

Für Konsolenausgaben, ASCII-Diagramme oder alles, was nicht eingefärbt werden soll:

```
+----+----+
| A  | B  |
+----+----+
| 1  | 2  |
+----+----+
```

Inline-Code

Einfache Backticks für Inline-Code:

Verwende die Funktion `print()`, um Text auszugeben. Variablen wie `count` unterscheiden Gross- und Kleinschreibung.

Verwende die Funktion print(), um Text auszugeben. Variablen wie count unterscheiden Gross- und Kleinschreibung.


Code-Block vs. Code-Editor

FunktionCode-BlockCode-Editor
Syntaxhervorhebung
Kopieren-Button
Von Schülern editierbar
Im Browser ausführbar✓ (Python, JS, SQL)
Speichert Schüler-Änderungen✓ (pro Schüler)
Automatisch bewertet✓ (mit python-check)
Seitengewichtwinziggrösser (lädt CodeMirror, Pyodide usw.)

Verwende Code-Blöcke für:

  • Beispiele, die Schüler lesen, aber nicht verändern sollen
  • Referenzmaterial (Konfiguration, Kommandozeilen-Syntax)
  • Ausgaben/erwartete Ergebnisse zum Vergleichen
  • Code in Sprachen, die Eduskript nicht ausführen kann (Java, C++, Go usw.)

Verwende Code-Editoren, wenn Schüler experimentieren, ausführen oder bewertet werden sollen.


Mehrzeilige Beispiele

Lange Code-Blöcke funktionieren einfach — Schüler können innerhalb des Blocks scrollen. Bei sehr langem Code (50+ Zeilen) erwäge:

  1. Aufteilen in kleinere Blöcke mit Prosa dazwischen
  2. Verlinken einer Code-Datei, die Schüler herunterladen können (über das Files-Panel)
  3. Einen Code-Editor mit mehreren Dateien verwenden (jede Datei wird zu einem Tab)

Code-Blöcke in anderen Komponenten

Code-Blöcke funktionieren in Callouts, Tabs, Listenpunkten, Tabellenzellen und so ziemlich überall, wo Markdown verschachtelte Inhalte erlaubt. Beachte, dass bei Code-Blöcken in einem Callout jede Zeile mit > beginnen muss:

> [!example] Ein Beispiel
> ```python
> print("Hello")
> ```

Code-Block-Spickzettel

ZielSyntax
Hervorgehobener Code-Block```python ... ``` (oder eine beliebige Sprache)
Klartext-Block``` ... ``` (ohne Sprache)
Inline-Code`name`
Code in einem CalloutJede Zeile mit > beginnen (inklusive der Zaun-Zeilen)