Adding

<script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

manually to my .md posts worked perfectly. Thanks. Any ideas on how to implement this in a more permanent manner?

I’d add it using a conditional like @justinrummel suggested to avoid embedding the script on pages that don’t need MathJax.

/_includes/scripts.html is probably the best place for it, but it can be added to one of the custom includes if you want to maintain to avoid messing with the main theme files.

Either way something like this:

{% if page.mathjax %}
<script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
{% endif %}

And then in your post/page’s YAML Front Matter you’d add mathjax: true if you wanted the script embedded.

For scripts that I want to add on every page, I usually add them to the _include/scripts.html page. I’ve also done some IF statements (which I’m sure are not the best way to do this) to see if I’m loading the main page or a “Search” page as seen on my repo: scripts.html

I tried above a few codes, but could not able to solve for mine. Later use below code, which solved the mathjax problem.

{% if page.mathjax %}
<script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
{% endif %}

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    },
    "HTML-CSS": { availableFonts: ["TeX"] }
  });
</script> 

Hi @mmistakes just wanted to let you know that I got this working. I followed this and the solution from @yuzhangbit.

You can add it to scripts.html or any of the two custom includes I’ve added to the theme for injecting scripts in the head or footer. /_includes/head/custom.html

The solution you posted above (dnjs.cloudflare.com hosting) worked when I put it in the /_includes/head/custom.html.

Thank you!

So I rolled back to the non-beta version of Chrome and was able to reproduce it. The sidebar is there, but it disappears after the MathJax script loads and messes with the page’s CSS.

It’s doing a whole lot of stuff that hides the sidebar.

You can edit the CSS for the .sidebar to fix it. Though this smells like a browser bug to me so it should be fixed when Chrome rolls out 57, as it works fine there and other browsers like Safari.

Removing the following from _sass/_sidebar.scss worked for me:

-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

Thank you @sudhirln92. I was updating something else and that snippet helped.

As per Krandown’s docs you need to add the MathJax JavaScript library for it work. https://www.mathjax.org/