Codeblöcke
Zeigt Code mit Syntax-Highlighting an. Für ausführbaren, editierbaren Code siehe das nächste Kapitel zu Code-Editoren.
Grundsyntax
Verwende dreifach-Backtick Fenced-Code-Blöcke. Die Sprachkennung nach dem öffnenden Fence aktiviert das Syntax-Highlighting.
```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 Kopier-Button erscheint oben rechts in jedem Codeblock, wenn der Schüler mit der Maus darüberfährt.
Unterstützte Sprachen
Eduskript verwendet highlight.js für Syntax-Highlighting und unterstützt von Haus aus Hunderte von Sprachen. Gängige:
| Sprache | Kennung(en) |
|---|---|
| Python | python, py |
| JavaScript | javascript, js |
| TypeScript | typescript, ts |
| SQL | sql |
| HTML | html, xml |
| CSS | css, scss |
| Java | java |
| C / C++ | c, cpp |
| Go | go |
| Rust | rust |
| Bash | bash, sh, shell |
| JSON | json |
| YAML | yaml, yml |
| Markdown | markdown, md |
| Diff | diff |
| Klartext | (Sprache weglassen) |
Nicht erkannte Sprachen werden ohne Farbe gerendert.
Klartext (ohne Highlighting)
Für Konsolenausgabe, ASCII-Diagramme, oder alles, was du nicht eingefärbt haben willst:
```
+----+----+
| A | B |
+----+----+
| 1 | 2 |
+----+----+
```
Inline-Code
Einfache Backticks für Inline:
Verwende die Funktion `print()`, um Text auszugeben. Variablen wie `count` unterscheiden zwischen Gross- und Kleinschreibung.
Verwende die Funktion print(), um Text auszugeben. Variablen wie count unterscheiden zwischen Gross- und Kleinschreibung.
Inline-Code mit Sprache
Hänge direkt nach dem schliessenden Backtick eine {:sprache}-Markierung an, um einen Inline-Ausschnitt genauso einzufärben wie einen Fenced-Code-Block — praktisch, wenn du einen echten Ausdruck mitten im Satz zeigen willst, ohne ihn in einen eigenen Block auszulagern:
Der Ausdruck `[x**2 for x in range(10) if x % 2 == 0]`{:python} ist eine List Comprehension.
Der Ausdruck [x**2 for x in range(10) if x % 2 == 0] ist eine List Comprehension.
Unterstützt: python, javascript/js, typescript/ts, sql, php, java, cpp, rust, go, html, css, json, xml, yaml. Ohne Markierung bleibt Inline-Code unfarbig.
Codeblock vs. Code-Editor
| Merkmal | Codeblock | Code-Editor |
|---|---|---|
| Syntax-Highlighting | ✓ | ✓ |
| Kopier-Button | ✓ | ✓ |
| Vom Schüler editierbar | ✗ | ✓ |
| Im Browser ausführbar | ✗ | ✓ (Python, JS, SQL) |
| Speichert Schüleränderungen | ✗ | ✓ (pro Schüler) |
| Automatisch bewertet | ✗ | ✓ (mit python-check) |
| Seitengewicht | winzig | grösser (lädt CodeMirror, Pyodide usw.) |
Codeblöcke verwenden für:
- Beispiele, die Schüler lesen, aber nicht verändern sollen
- Referenzmaterial (Konfiguration, Kommandozeilen-Syntax)
- Ausgabe/erwartete Ergebnisse zum Vergleichen
- Code in Sprachen, die Eduskript nicht ausführen kann (Java, C++, Go usw.)
Code-Editoren verwenden, wenn Schüler experimentieren, ausführen oder bewertet werden sollen.
Mehrzeilige Beispiele
Lange Codeblöcke funktionieren einfach so — Schüler können im Block scrollen. Bei sehr langem Code (50+ Zeilen), erwäge:
- Aufteilen in kleinere Blöcke mit Fliesstext dazwischen
- Verlinken einer Code-Datei zum Herunterladen (über das Dateien-Panel)
- Einen Code-Editor mit mehreren Dateien verwenden (jede Datei wird ein Tab)
Codeblöcke innerhalb anderer Komponenten
Codeblöcke funktionieren innerhalb von Callouts, Tabs, Listenpunkten, Tabellenzellen und praktisch überall, wo Markdown verschachtelte Inhalte erlaubt. Beachte, dass Fenced-Code-Blöcke innerhalb eines Callouts bei jeder Zeile ein vorangestelltes > brauchen:
> [!example] Ein Beispiel
> ```python
> print("Hello")
> ```
Codeblock-Spickzettel
| Ziel | Syntax |
|---|---|
| Hervorgehobener Codeblock | ```python ... ``` (oder jede andere Sprache) |
| Klartext-Block | ``` ... ``` (ohne Sprache) |
| Inline-Code | `name` |
| Inline-Code mit Farbe | `name`{:python} |
| Code in einem Callout | Jede Zeile mit > voranstellen (inklusive der Fence-Zeilen) |