Presentation blocks — frames and figures
Two main tools to structure your course without overusing the chapter/section hierarchy: the generic <mp-box> case (4 variants) and the <mp-figure> block for numbered figures with captions.
<mp-box> — generic frame
Equivalent to tcolorbox in LaTeX. Four visual variants are available via the style attribute. An optional <mp-title> as first child becomes a colored banner at the top.
| Variant | Use |
|---|---|
| accent | Accent-colored highlight (default). Good for a central claim, a «to remember» box. |
| grey | Soft neutral background. For a contextual note. |
| info | Left border in accent color. Blockquote-like, clean and unobtrusive. |
| subtle | Dashed border. Very light — good for a side remark or short anecdote. |
Variant accent (default)
<mp-box style="accent">
<mp-title>To remember</mp-title>
The derivative measures the rate of change of a function.</mp-box>Variant info
<mp-box style="info">
<mp-title>Tip</mp-title>
Use $\dfrac$ in inline formulas for better readability.</mp-box>Variants grey and subtle
<mp-box style="grey">
This definition dates back to the 17th century (Newton, Leibniz).</mp-box>
<mp-box style="subtle">
Anecdote: Newton developed his calculus during the 1665 plague, in isolation.</mp-box>style attribute conflicts with inline CSS, use style-name="info" or data-style="info" instead. The three forms are equivalent. <mp-figure> + <mp-caption> — figures
A figure groups an image (or an SVG, JSXGraph box…) with an optional caption. When an <mp-caption> is present, mathpad automatically inserts «Figure N — » before the caption and includes it in the automatic list of figures.
<mp-figure id="fig-parabola">
<img src="parabole.png" alt="Parabola">
<mp-caption>Graph of $f(x) = x^2$.</mp-caption>
</mp-figure>cours_tikz_001.png). Nothing else to do. | Attribute | Values | Description |
|---|---|---|
| id | free | HTML anchor — required to reference the figure later via <mp-ref target="..."> |
| numbering | none | Disables auto-numbering and inclusion in the list of figures |
Reference a figure
Once the figure has an id, use <mp-ref target="..."> to reference it:
We observe in <mp-ref target="fig-parabola"></mp-ref> a convex curve…Related tags (reminder)
Three other tags contribute to visual presentation but are documented elsewhere:
<mp-center>— Horizontally-centered block. See Inline formatting.<mp-warning>— Warning block (red, ⚠ icon). See Formal blocks.<mp-spacer>— Inline horizontal spacer. See Inline formatting.
Ready to try mathpad?
Create your first interactive scientific HTML document in the online editor, or import your existing LaTeX course in one click.