Math Rendering Test — LaTeX & Cartesian Graphs

This post tests two new rendering capabilities: LaTeX math notation via KaTeX, and Cartesian graphs via a custom SVG renderer.

Inline math

The quadratic formula is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$ , and Euler's identity is $e^{i\pi} + 1 = 0$ .

You can also reference variables inline — e.g., given a matrix $A \in \mathbb{R}^{m \times n}$ , its rank satisfies $\text{rank}(A) \leq \min(m, n)$ .

Display math (block equations)

The general form of a Taylor series centered at $a$ :

f(x) = \sum_{n=0}^{\infty} \frac{f^{(n)}(a)}{n!}(x - a)^n

The Gaussian integral:

\int_{-\infty}^{\infty} e^{-x^2}\, dx = \sqrt{\pi}

A system of linear equations $Ax = b$ written out:

\begin{pmatrix} a_{11} & a_{12} & a_{13} \\ a_{21} & a_{22} & a_{23} \\ a_{31} & a_{32} & a_{33} \end{pmatrix} \begin{pmatrix} x_1 \\ x_2 \\ x_3 \end{pmatrix} = \begin{pmatrix} b_1 \\ b_2 \\ b_3 \end{pmatrix}

Cartesian graphs

A parabola — $y = x^2$

Comparing $\sin(x)$ and $\cos(x)$

Blue is $\sin(x)$ , dashed red is $\cos(x)$ .

Parametric curve — unit circle

The unit circle is defined parametrically as $x(t) = \cos(t)$ , $y(t) = \sin(t)$ for $t \in [0, 2\pi]$ :

Logistic function — $f(x) = \frac{1}{1 + e^{-x}}$

Mixed content

Gradient descent updates a parameter $\theta$ at each step:

\theta_{t+1} = \theta_t - \alpha \nabla_\theta \mathcal{L}(\theta_t)

where $\alpha$ is the learning rate and $\mathcal{L}$ is the loss function. Below is a simple loss landscape $\mathcal{L}(\theta) = \theta^2 + 2$ :