Rendering LaTex In Markdown Using Jekyll

Sat, 11 Aug 2018 02:14:14 -0700

In putting together this blog, I wanted to be able to talk about various mathematical topics that I found interesting, which inevitably lead to using LaTex in my posts.

I’m currently using Atom as my editor (having converted from Sublime), and needed to install a bunch of packages first. First and foremost, I wanted to be able to render my markdown posts before hosting them on the blog, and consequentially needed a way to render LaTex. For this, I installed a few Atom packages:

To preview your post in Atom, you just type ctrl+shift+M, which will display both in-line and block math sections.

However, if you build your site locally with the command bundle exec jekyll serve or push it to a remote repo, the LaTex no longer renders properly. After Googling around a bit, I determined that this was due to the way markdown converters in Jekyll, like kramdown and redcarpet, do the conversion using MathJax – specifically, in-line math segments are not properly rendered. I wanted a way to both preview the LaTex in Atom, and properly render it usng Jekyll. I found two links that solved the problem for me:

In short, the following steps solved the problem of LaTex not rendering for me. I’m using the minima theme, so I first found the theme directory with bundle show minima. In this directory, I copied the ./layouts/post.html to a local directory in my project folder called ./_layouts/post.html.

Within this file, I pasted the following two sections of HTML code:

<script type="text/x-mathjax-config">
 MathJax.Hub.Config({
 tex2jax: {
 skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
 inlineMath: [['$','$']]
 }
 });
 </script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>

And voila – building the posts now correctly renders LaTex!

LaTeX |

Rendering LaTex In Markdown Using Jekyll