display equation in jekyll blog in latex format on github pages

Question

I am trying to write equations on my jekyll powered blog hosted on github pages. I am trying to use MathJax javascript library as per instructions here. Essentially, I added the following code below front matter in the _layouts\page.html and _layouts\post.html

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

(copied from here). The problem is that the equations still do not show up correctly on the post, e.g., I wrote the following in my post (with a blank line above and below it):

[\\ a^2 + b^2 = c^2 \\]

and instead of showing me the equation in the latex format on the page, it only escapes a \ and shows me the following

[\ a^{2} + b^{2} = c^{2} \]

Additional details (in my _config.yml regarding highlighting) are as follows

# Build settings
markdown: kramdown
highlighter: rouge
paginate: 5

kramdown:
   input: GFM
   hard_wrap: false
   # syntax_highlighter: rouge

Also, pasted below the is the code in _layouts\page.html

---
layout: default
---
<article class="post">

  <header class="post-header">
    <h1 class="post-title">{{ page.title }}</h1>
  </header>

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

  <div class="post-content">
    {{ content }}
  </div>

</article>

and the code in _layouts\post.html

---
layout: default
---
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">

  <header class="post-header">
    <h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>
    <p class="post-meta"><time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%b %-d, %Y" }}</time>{% if page.author %} • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ page.author }}</span></span>{% endif %}</p>
  </header>

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

  <div class="post-content" itemprop="articleBody">
    {{ content }}
  </div>

</article>

Any help in resolving this issues of showing equations properly will by very highly appreciated!

Thanks!

SN248

Answer 1

On the one hand, the math delimiters should be \[...\] (and double backslashes should you need to escape them).

On the other hand, kramdown (Jekyll's default markdown parser) has its somewhat unique math block syntax where it uses $$...$$ for both inline and display style, cf. http://kramdown.gettalong.org/syntax.html#math-blocks