I used MathJax to add support for showing LaTex style equations on my blog. Because I am using Jekyll with Github pages, I had to add this script to my site’s header include :
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
However, long equations would often get cropped, especially when viewed on mobile browsers. To fix that, add this to your CSS file (as suggested here):
// Enable scrolling in long equations
.MathJax_Display, .MJXc-display, .MathJax_SVG_Display {
overflow-x: auto;
overflow-y: hidden;
}
This allows long equations like the following to become scrollable, especially when viewed on a mobile browser.
\[\Psi_{velocity}(10 AM, 11 AM) = E\{velocity_{10 AM} \times velocity_{11 AM}\}\]