Python in the browser — <mp-code>
One of the points where mathpad sets itself apart from PDF: Python directly embedded and runnable in the browser. The student edits the code in a CodeMirror editor, clicks Run, the output (including turtle and pygame) appears in the course. No server, no install.
First example
A simple print, runnable thanks to the runnable attribute:
HTML
<mp-code runnable>
print("Hello, world !")
</mp-code>Output — click Run
print("Hello, world !")
Available attributes
| Attribute | Values | Description |
|---|---|---|
| runnable | boolean | Adds a green Run button. Without it, the block is just a syntax-highlighted editor (no execution). |
| width | Integer px (default 500) | Editor width. Use 350 for mobile-friendly. |
| height | Integer px (default 200) | Display hint (CSS forces an auto height that adapts to content). |
| theme | neat (default) · dracula · monokai · material · eclipse | CodeMirror theme. Lazy-loaded — only the used theme is downloaded. |
Python only
mp-code exclusively supports Python (CodeMirror text/x-cython mode + Skulpt). A
lang="..." attribute is ignored. For JavaScript or another language, use a plain <pre><code>. Loops and functions
Skulpt supports Python 3 — functions, loops, lists, conditions, everything works as expected.
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>Output — click Run
def factorielle(n):
if n <= 1:
return 1
return n * factorielle(n - 1)
for i in range(1, 7):
print(i, "! =", factorielle(i))
Turtle graphics
The turtle module works natively. Skulpt draws in a <canvas> that appears automatically below the editor.
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>Output — click Run
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)
Available editor themes
neatdefault, light
draculapopular dark
monokaiclassic dark
materialdark blue-ish
eclipselight, IDE
HTML
<mp-code runnable theme="dracula" width="350">
moyenne = sum([12, 15, 9, 18]) / 4
print("Average :", moyenne)
</mp-code>Output (Dracula theme)
moyenne = sum([12, 15, 9, 18]) / 4
print("Average :", moyenne)
Best practices
- 4-space indentation: the editor turns Tab into 4 spaces. Never mix tabs and spaces (classic Python error).
- Mobile-friendly: set
width="350"so the block fits in 355px viewport. - Lazy-load: CodeMirror and Skulpt only load if needed (if an mp-code is present in the document). Pure-theory courses don't pay the cost.
- Standard library: most of Python 3 stdlib works (math, random, turtle, time, json…), but no
os,requestsetc. (browser sandbox).
Editor button
In the online editor: Code → Python inserts the mp-code skeleton with
runnable and a sample function. A second button offers alternative themes. Ready to try mathpad?
Create your first interactive scientific HTML document in the online editor, or import your existing LaTeX course in one click.