pages-gem: MathJax not rendering on .github.io

Before submitting an issue, please be sure to

This issue affects

  • The site generated by GitHub Pages
  • Building sites locally

What did you do (e.g., steps to reproduce)

When trying to use MathJax as described here to display latex formulas the formulas are not rendered on the github.io version of websites created with jekyll. When previewing a site locally with jekyll serve, MathJax formula rendering works without issues.

What did you expect to happen?

See latex style formulas render online as well as offline.

What happened instead?

Latex style formulas didn’t render online.

Additional information

  • Link to the live site (if applicable):
  • Link to the source repo (if applicable):

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 19 (1 by maintainers)

Commits related to this issue

Most upvoted comments

The issue was not due to jekyll but my browser refusing to load http content from mathjax on a https page. Changing the mathjax js to be loaded via https solved the problem.

Thanks, for now this is good to me. I even wrote a short blog post about it: http://csega.github.io/mypost/2017/03/28/how-to-set-up-mathjax-on-jekyll-and-github-properly.html.

Just if someone else face the same problem, you should use this:

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

I went to your repository and I have some suggestions.

  1. Your post is using “layout: post” but you included MathJax in the layout page.
  2. I suggestion you delete everything related to MathJax in the layout page and start over.
  3. If you want MathJax to be enabled for all types of layouts, you should include it in the layout default.html; if you want MathJax to be enabled for only the post layout, you should include it in the layout post.html.
  4. Add the following (in the file default.html or post.html) after <\article>: <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript" ></script>
  5. If you want your equations to be automatically numbered, you may add the following:
<script type="text/x-mathjax-config"> MathJax.Hub.Config({ TeX: { equationNumbers: { autoNumber: "AMS" } } }); </script>
  1. You should install Jekyll in your computer. It is really helpful, especially when you are writing equations and debugging “latex-style” code. If you have Jekyll, you can ask it to render your pages by typing in the terminal “bundle exec jekyll serve” in the folder that your github page files are. It you show you an IP address where it rendered your pages. That’s cool.

Thank you very much for the help! It works now! 😃 The solution at the end was, that I had to move the scripts to the _includes/head.html, since the _layouts/default.html includes that. And I had to change the autoNumber: “AMS” to autoNumber: “all”, because with AMS the auto numbering did not work, I don’t know, why. But it works now, and it’s beautiful and thank you very much for your help again! 😃 I’ll definitely try Jekyll on my computer too. I am not really familiar with Ruby, but I hope it’s not too complicated.

I’m not sure if it’s a Mathjax or GHP problem. But I figured out that the double quotes seem to trip some parser/interpreter up. Because I get the consistent behaviour that double dollars (‘$$’) don’t work but other chars do.

With this basic MathJax config:

window.MathJax = { tex: { inlineMath: [[‘$’, ‘$’]], displayMath: [[“++”,“++”]] }, svg: { fontCache: ‘global’ } };

I can display mathjax with $ inline_{math} $ as well as with ++ A(formula) ++

Weird.

I was able to render successfully locally and not on GitHub. This method solved the issue for me.

Mine is rendered locally but not remotely. here is the post

here is the source

I have put <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> MathJax.Hub.Config({ config: ["MMLorHTML.js"], extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"], jax: ["input/TeX"], tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ], displayMath: [ ['$$','$$'], ["\\[","\\]"] ], processEscapes: false }, TeX: { TagSide: "right", TagIndent: ".8em", MultLineWidth: "85%", equationNumbers: { autoNumber: "AMS", }, unicode: { fonts: "STIXGeneral,'Arial Unicode MS'" } }, showProcessingMessages: false }); under _includes/head.html and it’s being loaded as I checked in developer’s mode in Safari (Inspect element).

On remote this is <p>The expectation <script type="math/tex">E(X)</script></p>

On local this is

<p>The expectation <span class="MathJax_Preview" style="color: inherit; display: none;"></span><span class="MathJax" id="MathJax-Element-1-Frame" tabindex="0" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot;><mi>E</mi><mo stretchy=&quot;false&quot;>(</mo><mi>X</mi><mo stretchy=&quot;false&quot;>)</mo></math>" role="presentation" style="position: relative;"><nobr aria-hidden="true"><span class="math" id="MathJax-Span-1" style="width: 2.462em; display: inline-block;"><span style="display: inline-block; position: relative; width: 2.001em; height: 0px; font-size: 122%;"><span style="position: absolute; clip: rect(1.744em, 1001.949em, 2.871em, -999.997em); top: -2.559em; left: 0em;"><span class="mrow" id="MathJax-Span-2"><span class="mi" id="MathJax-Span-3" style="font-family: STIXGeneral-Italic;">E<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.003em;"></span></span><span class="mo" id="MathJax-Span-4" style="font-family: STIXGeneral-Regular;">(</span><span class="mi" id="MathJax-Span-5" style="font-family: STIXGeneral-Italic;">X<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.054em;"></span></span><span class="mo" id="MathJax-Span-6" style="font-family: STIXGeneral-Regular;">)</span></span><span style="display: inline-block; width: 0px; height: 2.564em;"></span></span></span><span style="display: inline-block; overflow: hidden; vertical-align: -0.247em; border-left-width: 0px; border-left-style: solid; width: 0px; height: 1.191em;"></span></span></nobr><span class="MJX_Assistive_MathML" role="presentation"><math xmlns="http://www.w3.org/1998/Math/MathML"><mi>E</mi><mo stretchy="false">(</mo><mi>X</mi><mo stretchy="false">)</mo></math></span></span><script type="math/tex" id="MathJax-Element-1">E(X)</script></p>

If I recall correctly, autonumber AMS works when you define equations in the /begin{equation}, etc. I don’t think it will autonumerate equations defined in $$ eq $$. But you can check MathJax documentation, it is really nice.