Python im Browser — <mp-code>
Eines der Unterscheidungsmerkmale von mathpad gegenüber PDF: Python-Code, der direkt im Browser eingebettet und ausführbar ist. Der Schüler bearbeitet den Code in einem CodeMirror-Editor, klickt auf Ausführen, das Ergebnis (einschließlich Schildkröte und Pygame) erscheint im Cours. Kein Server, keine Installation.
Erstes Beispiel
Ein einfacher print, ausführbar dank dem Attribut runnable :
HTML
<mp-code runnable>
print("Hallo, Welt !")
</mp-code>Ergebnis — klicken Sie auf Ausführen
print("Hallo, Welt !")
Verfügbare Attribute
| Attribut | Werte | Beschreibung |
|---|---|---|
| runnable | boolean | Fügt eine grüne Schaltfläche Ausführen hinzu. Ohne, ist der Block ein einfacher syntaxgefärbter Editor (ohne Ausführung). |
| width | Ganzzahl px (Standard 500) | Breite des Editors. Verwenden Sie 350 für mobile-friendly. |
| height | Ganzzahl px (Standard 200) | Anzeige-Hinweis (CSS zwingt eine automatische Höhe, die sich an den Inhalt anpasst). |
| theme | neat (Standard) · dracula · monokai · material · eclipse | CodeMirror-Thema. Lazy-loaded — nur das verwendete Thema wird heruntergeladen. |
Nur Python
mp-code unterstützt ausschließlich Python (CodeMirror text/x-cython-Modus + Skulpt). Ein
lang="..."-Attribut wird ignoriert. Für JavaScript oder andere Sprachen, verwenden Sie ein einfaches <pre><code>. Schleifen und Funktionen
Skulpt unterstützt Python 3 — Funktionen, Schleifen, Listen, Bedingungen, alles funktioniert wie erwartet.
HTML
<mp-code runnable>
def factorielle(n):
if n <= 1:
return 1
return n * factorielle(n - 1)
for i in range(1, 7):
print(i, "! =", factorielle(i))
</mp-code>Ergebnis — klicken Sie auf Ausführen
def factorielle(n):
if n <= 1:
return 1
return n * factorielle(n - 1)
for i in range(1, 7):
print(i, "! =", factorielle(i))
Schildkrötengrafik (turtle)
Das turtle-Modul funktioniert nativ. Skulpt zeichnet in einer <canvas>, die automatisch unter dem Editor erscheint.
HTML
<mp-code runnable>
import turtle
t = turtle.Turtle()
t.speed(0)
for couleur in ["red", "orange", "gold", "green", "blue", "purple"]:
t.color(couleur)
for _ in range(4):
t.forward(80)
t.right(90)
t.right(60)
</mp-code>Ergebnis — klicken Sie auf Ausführen
import turtle
t = turtle.Turtle()
t.speed(0)
for couleur in ["red", "orange", "gold", "green", "blue", "purple"]:
t.color(couleur)
for _ in range(4):
t.forward(80)
t.right(90)
t.right(60)
Verfügbare Editor-Themen
neatStandard, hell
draculabeliebt dunkel
monokaiklassisch dunkel
materialdunkelblau
eclipsehell, IDE
HTML
<mp-code runnable theme="dracula" width="350">
moyenne = sum([12, 15, 9, 18]) / 4
print("Durchschnitt :", moyenne)
</mp-code>Ergebnis (Dracula-Thema)
moyenne = sum([12, 15, 9, 18]) / 4
print("Durchschnitt :", moyenne)
Gute Praktiken
- Einrückung mit 4 Leerzeichen : der Editor wandelt Tab in 4 Leerzeichen um. Mischen Sie Tab und Leerzeichen niemals (Python-Standardfehler).
- Mobile-friendly : setzen Sie
width="350", damit der Block in 355px Viewport passt. - Lazy-load : CodeMirror und Skulpt werden nur bei Bedarf geladen (wenn ein mp-code im Dokument vorhanden ist). Reine Theoriekurse zahlen den Preis nicht.
- Standardbibliothek : die meiste Python 3-Standardbibliothek funktioniert (math, random, turtle, time, json…), aber kein
os,requestsusw. (Sandbox-Browser).
Editor-Schaltfläche
Im Online-Editor: Code → Python fügt das mp-code-Skelett mit
runnable und einer Vorlagenfunktion ein. Eine zweite Schaltfläche bietet die alternativen Themen. Bereit, mathpad auszuprobieren?
Erstellen Sie Ihr erstes wissenschaftliches HTML-Dokument im Online-Editor, oder importieren Sie Ihren bestehenden LaTeX-Kurs in einem Klick.