# Responsive scaling of MathJax formulae

My blog posts on SICP occasionally require me to describe my solutions using mathematical formulae. I used to display them in code blocks, like so:

```
b_2 = (bp + aq)p + (bq + aq + ap)q
= b(p^2) + b(q^2) + 2apq + a(q^2)
= b(p^2 + q^2) + a(2pq + q^2)
p_1 = (p^2 + q^2)
q_1 = (2pq + q^2)
```

Then I discovered MathJax:

$$\begin{align*}
b_2 &= (bp + aq)p + (bq + aq + ap)q \\
&= b(p^2) + b(q^2) + 2apq + a(q^2) \\
&= b(p^2 + q^2) + a(2pq + q^2) \\
p_1 &= (p^2 + q^2) \\
q_1 &= (2pq + q^2)
\end{align*}$$

It’s open source, allows LaTeX notation, and most importantly, it’s *pretty*. What’s not to like?

Well. It lacks responsive scaling, for one. And that irritated me to no end.

So I began messing around with MathJax’s API, and have come up with a fix I’m reasonably satisfied with. I thought I’d share it in the off-chance someone else is looking to solve the same problem.

I should note that I used this Pen as a starting point - their code didn’t quite work the way I wanted it to, which is why I rolled a derivative solution.

**Update (21 Nov 2017)**: CodePen demo.