Rendering LaTex In Markdown Using Jekyll

Last updated on Feb 27, 2022 2 min read

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!

Rendering LaTex In Markdown Using Jekyll

Data Scientist