# 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.