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:

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 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

MerkmalCodeblockCode-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)
Seitengewichtwinziggrö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:

  1. Aufteilen in kleinere Blöcke mit Fliesstext dazwischen
  2. Verlinken einer Code-Datei zum Herunterladen (über das Dateien-Panel)
  3. 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

ZielSyntax
Hervorgehobener Codeblock```python ... ``` (oder jede andere Sprache)
Klartext-Block``` ... ``` (ohne Sprache)
Inline-Code`name`
Inline-Code mit Farbe`name`{:python}
Code in einem CalloutJede Zeile mit > voranstellen (inklusive der Fence-Zeilen)