adrianwong programmer · retired coal miner

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?

No responsive scaling

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.

Script