Mathematical formulas (KaTeX)
mathpad renders mathematical formulas via KaTeX, an ultra-fast JavaScript engine that displays LaTeX syntax directly in the browser. Here we cover how to write inline formulas, display formulas, aligned equations and systems — with the same syntax as LaTeX.
Inline and display: $..$ and $$..$$
As in LaTeX:
$...$— inline formula within the text flow (small size, in the line)$$...$$— display-mode formula, isolated from the text and horizontally centered
<p>The discriminant $\Delta = b^2 - 4ac$ determines the number of solutions.</p>
<p>The solutions are then:</p>
$$x = \dfrac{-b \pm \sqrt{\Delta}}{2a}$$The discriminant $\Delta = b^2 - 4ac$ determines the number of solutions.
The solutions are then:
$$x = \dfrac{-b \pm \sqrt{\Delta}}{2a}$$\frac defaults to small style (compact numerator and denominator). For full display (like in display mode), use \dfrac: $\dfrac{1}{2}$ instead of $\frac{1}{2}$. Common macros
Here are the most useful LaTeX commands in a typical math course — all supported by KaTeX:
| Command | Output |
|---|---|
| \dfrac{a}{b} | $\dfrac{a}{b}$ |
| \sqrt{x}, \sqrt[3]{x} | $\sqrt{x},\;\sqrt[3]{x}$ |
| x^{2}, x_{n+1} | $x^{2},\;x_{n+1}$ |
| \int_{a}^{b} f(x)\,dx | $\int_{a}^{b} f(x)\,dx$ |
| \sum_{k=0}^{n} a_k | $\sum_{k=0}^{n} a_k$ |
| \lim_{n \to +\infty} u_n | $\lim_{n \to +\infty} u_n$ |
| \vec{u},\;\overrightarrow{AB} | $\vec{u},\;\overrightarrow{AB}$ |
| \mathbb{R},\;\mathbb{N},\;\mathbb{C} | $\mathbb{R},\;\mathbb{N},\;\mathbb{C}$ |
| \Leftrightarrow,\;\Rightarrow,\;\implies | $\Leftrightarrow,\;\Rightarrow,\;\implies$ |
| \leq,\;\geq,\;\neq | $\leq,\;\geq,\;\neq$ |
| \alpha,\;\beta,\;\Omega,\;\Delta | $\alpha,\;\beta,\;\Omega,\;\Delta$ |
| \binom{n}{k} | $\binom{n}{k}$ |
<mp-align> — aligned equations
Equivalent to the amsmath align* environment. Anchors are aligned with &, each line ends with \\.
<mp-align>
(x+2)^2 & = & x^2 + 4x + 4 \\
& = & x^2 + 4(x+1) \\
& \geq & 0
</mp-align>Variant: equivalences
To align equivalences ($\Leftrightarrow$) in the middle:
<mp-align>
2x + 6 = 0 &\Leftrightarrow& 2x = -6 \\
&\Leftrightarrow& x = -3
</mp-align>Equation systems
For a system with an opening curly brace on the left, use \left\{\begin{array}{l}...\end{array}\right. directly in a display block:
$$\left\{\begin{array}{rcl}
2x + 3y & = & 7 \\
x - y & = & 1
\end{array}\right.$$Piecewise function
Use \begin{cases}...\end{cases} for a case definition:
$$f(x) = \begin{cases}
-x & \text{si } x \lt 0 \\
x^2 & \text{si } x \geq 0
\end{cases}$$Matrices
Several environments are available depending on the desired brackets:
pmatrix— parentheses ()bmatrix— square brackets []vmatrix— vertical bars || (determinant)
$$A = \begin{pmatrix} 1 & 2 \\ 3 & 4 \end{pmatrix},\quad
\det(A) = \begin{vmatrix} 1 & 2 \\ 3 & 4 \end{vmatrix} = -2$$Text within a formula
In math mode, letters are rendered in italic (variables). To insert normal text, use \text{...}:
$$\text{for all } x \in \mathbb{R},\quad x^2 \geq 0$$Reference a numbered block
To reference a numbered theorem, property or chapter, give it a standard HTML id, then use <mp-ref target="...">. The reference will display the target element's number and be clickable.
| Attribute | Values | Description |
|---|---|---|
| target | id of the target element | Required — points to the HTML anchor |
| format | short | full | short = number only («3»), full = labeled («Theorem 3»). Default short. |
<mp-theorem id="thm-pythagore">
<mp-title>Pythagorean theorem</mp-title>
$$a^2 + b^2 = c^2$$
</mp-theorem>
… <mp-ref target="thm-pythagore" format="full"></mp-ref> then gives us …Complete example
<p>We solve the equation $2x^2 - 3x - 2 = 0$.</p>
<p>Computing the discriminant:</p>
<mp-align>
\Delta & = & (-3)^2 - 4 \times 2 \times (-2) \\
& = & 9 + 16 \\
& = & 25
</mp-align>
<p>Since $\Delta > 0$, the equation has two real solutions:</p>
$$\left\{\begin{array}{rcl}
x_1 & = & \dfrac{3 - 5}{4} = -\dfrac{1}{2} \\[6pt]
x_2 & = & \dfrac{3 + 5}{4} = 2
\end{array}\right.$$We solve the equation $2x^2 - 3x - 2 = 0$.
Computing the discriminant:
$$\begin{array}{rcl}\Delta & = & (-3)^2 - 4 \times 2 \times (-2) \\ & = & 9 + 16 \\ & = & 25\end{array}$$Since $\Delta > 0$, the equation has two real solutions:
$$\left\{\begin{array}{rcl} x_1 & = & \dfrac{3 - 5}{4} = -\dfrac{1}{2} \\[6pt] x_2 & = & \dfrac{3 + 5}{4} = 2\end{array}\right.$$Ready to try mathpad?
Create your first interactive scientific HTML document in the online editor, or import your existing LaTeX course in one click.