Learning to be Giant.

How to display math formulas in jekyll (with MathJax)


I met some trouble inserting math formulas into the jekyll blogs. I used MathJax as the rendering engine. When I tried to insert some simple equations like <pre> </pre>, it performs ok: But when it comes to some complex formulas, it cannot successfully render. For example, I want to render a formula like this one:

\[\left\{ {\begin{array}{*{20}{c}}
{{a_{11}}{x_1} + {a_{12}}{x_2} + ... + {a_{1q}}{x_q} = {b_1}}\\
{{a_{21}}{x_1} + {a_{22}}{x_2} + ... + {a_{2q}}{x_q} = {b_2}}\\
{{a_{p1}}{x_1} + {a_{p2}}{x_2} + ... + {a_{pq}}{x_q} = {b_p}}
\end{array}} \right. \Leftrightarrow Ax = b\]

The result will be:

\[\left\{ {\begin{array}{*{20}{c}} {x_1} + {a_{12}}{x_2} + ... + {a_{1q}}{x_q} = {b_1}}\\ {x_1} + {a_{22}}{x_2} + ... + {a_{2q}}{x_q} = {b_2}}\\ {...}\\ {x_1} + {a_{p2}}{x_2} + ... + {a_{pq}}{x_q} = {b_p}} \end{array}} \right. \Leftrightarrow Ax = b\]

Pretty weird, huh? Then I found that the wrongly rendered formula misses some elements, like {{a_{11}}}. Suddenly, I realized that all the things with two pairs of curly braces will be recognized by Jekyll as a variable. Since there is not a variable named a_{11}, this part of the equation is ignored. As we know this, the solution is straightforward. Just surround the code block with { % raw %} and { % endraw %} (remember to remove the blank space right after the first curly braces). Now it looks like:

\[\left\{ {\begin{array}{*{20}{c}} {{a_{11}}{x_1} + {a_{12}}{x_2} + ... + {a_{1q}}{x_q} = {b_1}}\\ {{a_{21}}{x_1} + {a_{22}}{x_2} + ... + {a_{2q}}{x_q} = {b_2}}\\ {...}\\ {{a_{p1}}{x_1} + {a_{p2}}{x_2} + ... + {a_{pq}}{x_q} = {b_p}} \end{array}} \right. \Leftrightarrow Ax = b\]


Disclaimer: This is a personal weblog. The opinions expressed here represent my own and not those of any entity with which I have been, am now, or will be affiliated.