Integrate Blog Content With MathJax

MathJax is a javascript library that able to display mathematical formula in your web page.

To integrate MathJax into your Jekyll server. You will need to include the following code in your <head>...</head> html block.

1 <script type="text/javascript"
2   src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
3 </script>

For example, we could create a head.html in our folder named _include with the following code format :

1 <head>
2   <!-- other links and scripts -->
3 
4   <script type="text/javascript"
5       src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
6   </script>
7 
8   <!-- other links and scripts -->
9 </head>

The next step is to add the head.html file in html file located in ./_layout/default.html with code :

1   {% include head.html %}

The content in the default.html should structured as :

1 <html lang="en-us">
2   {% include head.html %}
3   <body class="theme-base-08 layout-reverse">
4   <!-- ignored codes -->
5   </body>
6 </html>

Test formula

Test the following latex formula in markdown post document:

    $$a^2+b^2=c^2$$

The result should display as following if the library is successfully deployed : $$a^2+b^2=c^2$$

Note :

If we do not want a liquid tag to be processed, the code can be surrounded with {% raw %} and {% endraw %}.

The tag syntax is described in Liquid for Designers.