MathJax Showcase for LaTeX in HTML

A single-file demo page showing inline math, displayed equations, AMS environments, matrices, alignment, cases, colors, macros, physics-style notation, number theory, calculus, combinatorics, logic, and more — all rendered directly in the browser.

\[ \forall\, \varepsilon > 0\; \exists\, \delta > 0\; \text{such that}\; \norm{\vect{x}-\vect{a}} < \delta \implies \abs{f(\vect{x}) - L} < \varepsilon, \qquad \sum_{n=1}^{\infty}\frac{1}{n^2}=\frac{\pi^2}{6} \]
Single file CDN MathJax 3 Custom macros Responsive cards Display + inline math

1. Inline math and basic symbols

You can place math naturally inside text, like $e^{i\pi}+1=0$, $\alpha,\beta,\gamma$, $x_1, x_2, \dots, x_n$, or set-builder notation $A = \set{x \in \R : x^2 < 2}$.

$f(x)=x^3-2x+1$, $\lim_{x\to 0}\frac{\sin x}{x}=1$, $\binom{n}{k} = \frac{n!}{k!(n-k)!}$

2. Display equations

Displayed math is ideal for larger formulas and derivations.

\[ \int_0^{\infty} e^{-x^2}\,\dd x = \frac{\sqrt{\pi}}{2} \] \[ \nabla \cdot \vect{E} = \frac{\rho}{\varepsilon_0}, \qquad \nabla \times \vect{E} = -\frac{\partial \vect{B}}{\partial t} \]

3. Alignment and multi-line derivations

The AMS alignment environments are one of the nicest features to preserve from LaTeX.

\[ \begin{aligned} (x+y)^3 &= (x+y)(x+y)^2 \\ &= (x+y)(x^2+2xy+y^2) \\ &= x^3 + 3x^2y + 3xy^2 + y^3 \end{aligned} \]

4. Cases and piecewise functions

Great for algorithms, semantics, and discrete math definitions.

\[ f(n)= \begin{cases} 1, & \text{if } n=0,\\ n\,f(n-1), & \text{if } n>0. \end{cases} \] \[ \abs{x}= \begin{cases} x, & x\ge 0,\\ -x, & x<0. \end{cases} \]

5. Matrices and determinants

Useful in linear algebra, computer graphics, and quantum computing.

\[ A = \begin{bmatrix} 1 & 2 & 3 \\ 0 & 1 & 4 \\ 0 & 0 & 1 \end{bmatrix}, \qquad \det(A)=1 \] \[ U = \frac{1}{\sqrt{2}} \begin{bmatrix} 1 & 1 \\ 1 & -1 \end{bmatrix} \]

6. Number sets and custom macros

This page defines macros like $\R$, $\N$, $\Z$, $\Q$, $\C$, $\vect{v}$, $\abs{x}$, and $\norm{\vect{x}}$.

\[ \Z \subset \Q \subset \R \subset \C, \qquad \vect{u}\cdot\vect{v} = \norm{\vect{u}}\,\norm{\vect{v}}\cos\theta \]

7. Summation, products, and limits

MathJax handles large operators well in both inline and display forms.

\[ \sum_{k=0}^{n} ar^k = a\frac{1-r^{n+1}}{1-r}, \qquad \prod_{p\text{ prime}} \frac{1}{1-p^{-s}} = \zeta(s) \] \[ \lim_{n\to\infty}\left(1+\frac{1}{n}\right)^n = e \]

8. Logic and theoretical computer science

Nicely suited for formal reasoning and semantics.

\[ (P \to Q) \iff (\neg P \lor Q), \qquad \models \forall x\, (P(x) \to Q(x)) \] \[ \lambda x.\,x : A \to A, \qquad \Gamma \vdash e : \tau \]

9. Calculus and differential equations

Large fractions, partial derivatives, and vector notation render cleanly.

\[ \frac{\partial u}{\partial t} = \alpha \left( \frac{\partial^2 u}{\partial x^2} + \frac{\partial^2 u}{\partial y^2} \right) \] \[ y'' + 3y' + 2y = 0 \quad\Longrightarrow\quad y(t)=c_1 e^{-t}+c_2 e^{-2t} \]

10. Probability and statistics

Good support for expectation, variance, and distributions.

\[ \mathbb{E}[X] = \sum_x x\,P(X=x), \qquad \mathrm{Var}(X)=\mathbb{E}[X^2]-\mathbb{E}[X]^2 \] \[ X \sim \mathcal{N}(\mu,\sigma^2) \]

11. Commutative diagrams, arrows, and category flavor

Even without TikZ, many arrow-heavy expressions still look excellent.

\[ A \xrightarrow{f} B \xrightarrow{g} C, \qquad g \circ f : A \to C \] \[ F : \mathcal{C} \to \mathcal{D}, \qquad \eta : \mathrm{Id}_{\mathcal{C}} \Rightarrow GF \]

12. Decorations, cancellation, and color

These are often handy for teaching, derivations, and slide explanations.

\[ \cancel{x^2} + 2x + \cancel{1} - \cancel{x^2} = 2x + \cancel{1} \] \[ {\color{#38bdf8}a^2} + {\color{#a78bfa}b^2} = {\color{#22c55e}c^2} \]

13. Theorems, text inside math, and mixed notation

MathJax handles \text{...} nicely, so you can keep explanatory labels directly inside formulas.

\[ \text{If } a \equiv b \pmod n \text{ and } c \equiv d \pmod n, \text{ then } a+c \equiv b+d \pmod n. \]
\[ T(n)= \begin{cases} 1, & n=1,\\ 2T(n/2)+n, & n>1, \end{cases} \qquad \text{so } T(n)=\Theta(n\log n). \]

14. A compact “big features” demo

\[ \begin{aligned} \oint_{\partial \Omega} \vect{F}\cdot \dd\vect{r} &= \iint_{\Omega} \left(\frac{\partial Q}{\partial x} - \frac{\partial P}{\partial y}\right)\dd A \\ \Pr(X \ge k) &= \sum_{j=k}^{n} \binom{n}{j} p^j(1-p)^{n-j} \\ A^{-1} &= \frac{1}{\det A}\operatorname{adj}(A), \qquad \det A \ne 0 \\ \forall f \in C([a,b]) &\;\exists c \in [a,b] \text{ such that } \int_a^b f(x)\,\dd x = f(c)(b-a) \end{aligned} \]

This section mixes contour integrals, probability, linear algebra, and analysis in one aligned block.

15. Source snippet

Here is the kind of LaTeX you can drop into your HTML content. MathJax interprets it in the browser.

<p>Inline math: $e^{i\pi}+1=0$</p>

<div>
\[
\begin{aligned}
  \sum_{n=1}^{\infty}\frac{1}{n^2} &= \frac{\pi^2}{6} \\
  \int_0^1 x^2\,\mathrm{d}x &= \frac{1}{3}
\end{aligned}
\]
</div>

Everything above is rendered by the browser, not pre-generated as an image.