Add Mathjax to Jekyll blog

Add mathjax

The another good thing of Jekyll blog¹ is that we can finally use math formula in it.

$$ \nabla \times \vec{B} = 0 $$

There was troubles when I tried to include some formula in Github README.md file.

Haixing Hu’s blog was helpful to do it.

Need to fix 3 kinds of files in total.

1. make a new mathjax_support.html file in _include folder

_include folder saves html formats to use in your layout files.

We will use this file at the next step.

<script type="text/x-mathjax-config"> MathJax.Hub.Config({ TeX: { equationNumbers: { autoNumber: "all" } } }); </script>
       <script type="text/x-mathjax-config">
         MathJax.Hub.Config({
           tex2jax: {
             inlineMath: [ ['$','$'], ["\\(","\\)"] ],
             processEscapes: true
           }
         });
       </script>
       <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>

2. fix your _layout file

You might have _layout folder or else to save the formats. I would use Mathjax only for my posts. Thus, I will fix only my post.html file which set the format of my posts.

Add this ruby code box before body

3. YAML front matter block

when you edit your markdown file, (in my case, layout is supported by post.html in _layout folder.)

layout: post

math_use: true

Now enjoy Latex format in your blog.

Special case

In the case of my blog, the main page of the blog shows the recent posts. I don’t want to make a mess due to the formula. Then, I need to fix two files. post-index.html in _include folder, and YAML block of index.html file in main folder.