Since the math is ren­dered by your lo­cal TeX in­stal­la­tion, you have the full con­trol over its ap­pear­ance and you can be sure that it will al­so ren­der the same on all browsers. Now or two years lat­er.

As you un­leash the full pow­er of a stat­ic site gen­er­a­tor to con­vert La­TeX for­mu­las to vec­tor graph­ics lo­cal­ly, your view­ers are saved from need­less HTTP re­quests and heavy JavaScript pro­cess­ing.

Em­bed math di­rect­ly in HTM­L5 markup as pure paths, cut­ting away all ex­ter­nal de­pen­den­cies or ex­tra fonts. And hav­ing the SVG in­line means you can make use of all the CSS good­ies on it.

Demo time!

Be sure to re­fresh your brows­er a cou­ple of times to see how the ren­der­ing per­forms and that there is no blank space or jump­ing un­til the math ap­pears. View the page source to ver­i­fy that there is noth­ing ex­tra be­ing load­ed to make this hap­pen.

Try to re­size the win­dow — ev­ery­thing is pos­si­ble, so why not have a dif­fer­ent lay­out of long equa­tions op­ti­mized for small­er screens?

Ma­tri­ces ren­der pret­ty well al­so:

R = \begin{pmatrix} \langle\mathbf{e}_1,\mathbf{a}_1\rangle & \langle\mathbf{e}_1,\mathbf{a}_2\rangle & \langle\mathbf{e}_1,\mathbf{a}_3\rangle & \ldots \\ 0 & \langle\mathbf{e}_2,\mathbf{a}_2\rangle & \langle\mathbf{e}_2,\mathbf{a}_3\rangle & \ldots \\ 0 & 0 & \langle\mathbf{e}_3,\mathbf{a}_3\rangle & \ldots \\ \vdots & \vdots & \vdots & \ddots \end{pmatrix}. —QR de­com­po­si­tion, Wikipedia

Now, some in­line math — note the ver­ti­cal align­ment, con­sis­tent line spac­ing and that noth­ing gets re­lay­out­ed dur­ing page load:

Mul­ti­ply­ing x_n by a lin­ear phase e^{\frac{2\pi i}{N}n m} for some in­te­ger m cor­re­sponds to a cir­cu­lar shift of the out­put X_k : X_k is re­placed by X_{k-m} , where the sub­script is in­ter­pret­ed mod­u­lo N (i.e., pe­ri­od­i­cal­ly). Sim­i­lar­ly, a cir­cu­lar shift of the in­put x_n cor­re­sponds to mul­ti­ply­ing the out­put X_k by a lin­ear phase. Math­e­mat­i­cal­ly, if \{x_n\} rep­re­sents the vec­tor \boldsymbol{x} then if \mathcal{F}(\{x_n\})_k=X_k then \mathcal{F}(\{ x_n\cdot e^{\frac{2\pi i}{N}n m} \})_k=X_{k-m} and \mathcal{F}(\{x_{n-m}\})_k=X_k\cdot e^{-\frac{2\pi i}{N}k m} —Dis­crete Fouri­er trans­form § Shift the­o­rem, Wikipedia

The in­line SVG fol­lows sur­round­ing text size, so you can use it eas­i­ly in more places than just the main copy:

Ev­ery­thing can be col­ored just by putting CSS class­es around:

X_{k+N} \ \stackrel{\mathrm{def}}{=} \ \sum_{n=0}^{N-1} x_n e^{-\frac{2\pi i}{N} (k+N) n} = \sum_{n=0}^{N-1} x_n e^{-\frac{2\pi i}{N} k n} \underbrace{e^{-2 \pi i n}}_{1} = \sum_{n=0}^{N-1} x_n e^{-\frac{2\pi i}{N} k n} = X_k. \begin{array}{rcl} X_{k+N} & \ \stackrel{\mathrm{def}}{=} \ & \sum_{n=0}^{N-1} x_n e^{-\frac{2\pi i}{N} (k+N) n} \\ & = & \sum_{n=0}^{N-1} x_n e^{-\frac{2\pi i}{N} k n} \underbrace{e^{-2 \pi i n}}_{1} \\ & = & \sum_{n=0}^{N-1} x_n e^{-\frac{2\pi i}{N} k n} = X_k. \end{array} —Dis­crete Fouri­er trans­form § Pe­ri­od­ic­i­ty, Wikipedia

But it’s al­so pos­si­ble to col­or on­ly parts of the equa­tion — with a col­or that match­es page theme.