Writing equations in Jeklly

Writing $\LaTeX$ on Jeklly is not hard, but it can be tricky. After some light surfing on the internet, I found what works for me.

Use MathJax for Jekyll

• insert the code in the _layouts/default.html
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\$','\$']],
processEscapes: true
}
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
/* Some pointless Javascript */
var rawr = ["r", "a", "w", "r"];

Note in the last line, a cdn or content delivery network line was used to invoke interpretation of the $\LaTeX$ style writing, and eventually convert it to figure.

Use LaTex to write equations

I found LaTex/Mathematics is wildly used to write equations on the website, such as rmarkdown.

For example, use $$mean = \frac{\displaystyle\sum_{i=1}^{n} x_{i}}{n}$$ to write

$mean = \frac{\displaystyle\sum_{i=1}^{n} x_{i}}{n}$

Use $$k_{n+1} = n^2 + k_n^2 - k_{n-1}$$ to write

$k_{n+1} = n^2 + k_n^2 - k_{n-1}$

2021-08-08 update

Apparently, mathjax v3 is now available link. To use it, simply change:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\$','\$']],
processEscapes: true
}
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>

to：

<script type="text/javascript">
window.MathJax = {
tex: {
inlineMath: [['$', '$'], ['\$', '\$']],
processEscapes: true
}
};
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

However, I find the new version doesn’t automatically render horizontal scroll bar for long equations.

2021-08-09 update

$\KaTeX$, as an alternative to MathJax, can render equations with HTML format and it’s much faster. Following this blog post, I was able to add it to my blog.

To use $\KaTeX$, add the following to _config.yml:

kramdown:
math_engine: katex

<!--KaTeX-->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.js" integrity="sha384-pK1WpvzWVBQiP0/GjnvRxV4mOb0oxFuyRxJlk6vVw146n3egcN5C925NCP7a7BY8" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"></script>
<script>
renderMathInElement(document.body, {
// customised options
// • auto-render specific keys, e.g.:
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
{left: '\$', right: '\$', display: false},
{left: '\$', right: '\$', display: true}
],
// • rendering keys, e.g.:
throwOnError : false
});
});
</script>

and put the following to css/main.scss file to add scroll bar to long equations:

.katex-display > .katex {
display: inline-block;
white-space: nowrap;
max-width: 100%;
overflow-x: scroll;
overflow-y: visible;
text-align: initial;
}

Note that inorder to use $jekyll serve$ on local machines, extra package called kramdown-math-katex is needed. To install it:

gem install kramdown-math-katex --user-install