Inline formatting — colors, highlight, text size
These mathpad tags inline within a paragraph style a word or expression — text color, highlighter, underline, precise spacing, local size. For styled blocks (definition, theorem, colored box), see the following pages.
<mp-color> — text color
Colors a fragment of text with any CSS color. Handy for a key term to memorize or an instruction to highlight.
| Attribute | Values | Description |
|---|---|---|
| value | Any CSS color | e.g. red, #dc2626, rgb(220,38,38), hsl(0,80%,50%) |
The discriminant <mp-color value="#dc2626">must be positive</mp-color> for two real roots.The discriminant
<mp-highlight> — highlighter
Adds a colored background (felt-pen effect) behind a word. Ideal for a key term to learn or a rule to remember.
| Attribute | Values | Description |
|---|---|---|
| value | CSS color (preferably light) | e.g. #fef3c7 (yellow), #d1fae5 (green), #fce7f3 (pink) |
A <mp-highlight value="#fef3c7">prime number</mp-highlight> is divisible only by 1 and itself.A
<mp-underline> — safe underline
Underlines in the theme accent color — 2 px thick, 3 px offset for comfortable reading. Avoids the HTML <u> tag which gets confused with a hyperlink.
We therefore assume <mp-underline>x positive</mp-underline>.We therefore assume
<mp-center> — centered block
Horizontally centers its content — an isolated formula, a figure, a key sentence.
<mp-center>
<strong>Remember this formula!</strong>
</mp-center><mp-spacer> — inline non-breaking space
Inserts a calibrated horizontal gap — handy to align answers or leave a blank to fill in.
| Attribute | Values | Description |
|---|---|---|
| n | Integer (default 1) | Number of spaces to insert |
Answer:<mp-spacer n="5"></mp-spacer>$x = 3$Text size
mathpad has no dedicated tag — we use <span style="font-size:Nem"> directly, which has the advantage of being very explicit (the user can easily change the size).
In the online editor: Format → Size offers 5 pre-calibrated levels:
- Very small —
font-size: 0.5em - Small —
font-size: 0.75em - Large —
font-size: 1.3em - Very large —
font-size: 1.8em - Huge —
font-size: 3em
<span style="font-size:1.3em">Important:</span> check the sign before computing.Important: check the sign before computing.
Combine the tags
These tags can be nested — for instance a highlight inside a color inside a large size:
<span style="font-size:1.3em">
<mp-highlight value="#fef3c7">
<mp-color value="#92400e">Golden rule:</mp-color>
</mp-highlight> always reason in both directions.
</span>Ready to try mathpad?
Create your first interactive scientific HTML document in the online editor, or import your existing LaTeX course in one click.