[liquid_tags] Inline math is not rendered with MathJax

[drorata]

liquid_tags fails to render inline math for me. I managed to have inline math rendered properly when using "plain" markdown. See for example this example with sources available here.

However, inline math in a Jupyter notebook is not rendered properly even though it does look OK inside the Jupyter environment. An example can be found in the following places:

• The rendered post
• Markdown source
• The notebook's source

As you can see, Github renders the inline math properly, but when included in a post, this breaks. I failed to understand where the problem is. Any help would be appreciated.

Update 1: It seems like the function init_mathjax() is not executed when the HTML page is loaded. If I run it manually from the page's console, the inline math is rendered properly.

Update 2: I cross posted the issue also on SO

[avaris]

Well, it is executed. The issue is mathjax JS is loaded with async. So, when the init_mathjax is run, mathjax JS might not be loaded (and therefore no window.MathJax) which makes the if inside init_mathjax fail and the whole function does nothing basically.

Looks like async was added recently (see #882).

[drorata]

That's a little confusing for me... Should I have understood the solution from @avaris comment?

[avaris]

@drorata Sorry if it turned out confusing. My suggestion is to remove async from this line:

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML"></script>

so that it becomes:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML"></script>

async tells the browser to continue loading html (and running scripts) while it's fetching this file. However the next script init_mathjax depends on this file being loaded beforehand and it'll do nothing if it's not loaded (yet). So the asnyc kind of breaks it.

[drorata]

This was introduced in this commit https://github.com/getpelican/pelican-plugins/commit/be9e98b897e5ce6febe42745893c06f9c7175312 by @isms; any idea why? Shouldn't it simply be

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML"></script>

?

[isms]

@drorata "any idea why" - sure, it's the exact snippet from the MathJax documentation.

[drorata]

@isms But it broke my rendering. What is the best practice solution?

[pkra]

@dorata the problem is that the MathJax configuration is pretty weird in general. It loads MathJax, then sets the configuration, and then re-renders the page -- that's pretty inefficient and breaks when loading MathJax asynchronously (as the function to configure and re-render will never hit the if check).

It would be better to configure MathJax before it is loaded. I'm guessing the weird setup stems from the days when MathJax could not be configured easily in plain JS; that's no longer a problem, cf http://docs.mathjax.org/en/latest/configuration.html#using-plain-javascript

[drorata]

@pkra First, nice surprise to meet here :)

Secondly, would this attempt, https://github.com/drorata/pelican-plugins/commit/d8b3ef2365d88f8e662afea5d9d52f3df939f267, address the problem correctly? @isms what do you think?

[pkra]

@pkra First, nice surprise to meet here :)

Nice to run into you!

Secondly, would this attempt, drorata/pelican-plugins@d8b3ef2, address the problem correctly? @isms what do you think?

That looks good; I've added some comments.

[drorata]

I have updated the attempt based on @pkra comment. See https://github.com/drorata/pelican-plugins/commit/139eac61dcfd66c8278f1fc714593ff33aae25ff

@isms Any reservations?

[isms]

@drorata No reservations here.

[twiecki]

I am up-to-date but I still see this behavior (http://localhost:8000/blog/2015/11/10/mcmc-sampling/). I also tried your branch drorata:improve-mathjax-integration-2 but it also didn't fix the mathjax inline problem. @drorata any ideas?

[benlindsay]

I'm also up to date and see the same behavior (math works in notebook but not in webpage). I even tried deleting the async from line 170 of liquid_tags/notebook.py as mentioned above and that didn't fix it. Any ideas of what to do?

[drorata]

@twiecki Have you looked up my blog's sources? Maybe you can compare and find out the difference. In this example I believe everything is rendered correctly.

[yamalcaraz]

Hi, I am also having this problem.

I tried recreating your blog on my local computer by cloning this. I also cloned your version of pelican-plugins. But it seems that on my computer, the inline maths do not render as expected. I am not sure why this is happening. Can you help?

[drorata]

@yamalcaraz Are you sure you're using the same version of pelican?

[yamalcaraz]

Yes, I am sure, I am using pelican 3.7.1. I also tried using your environment.yml, but still does not work...

[twiecki]

For some odd reason, even though I'm quite sure I am up-to-date on pelican-plugins, the ipynb file was not up-to-date. I downloaded it manually (after @drorata's fix) and replaced it and it's working fine now.

[yamalcaraz]

Hi @twiecki, I'm not sure which ipynb file you are talking about, I searched the pelican-plugins for an *.ipynb file but I found only some ipython notebooks for testing. I am sorry I am just a beginner at building a website. Thank you for your help!

[twiecki]

Sorry, I meant notebook.py: https://github.com/drorata/pelican-plugins/blob/master/liquid_tags/notebook.py

[benlindsay]

Wow, the same thing worked for me! Doing a diff of my notebook.py file and @drorata's, the only non-whitespace difference was on what for me was line 180. I had

displayAlign: 'left', // Change this to 'center' to center equations.

and @drorata had

displayAlign: 'center', // Change this to 'center' to center equations.

When I changed 'left' to 'center' that fixed the problem. Any idea why that would affect inline math? I don't have any standalone equations to center or align, just some inline math expressions. Anyway as long as it works I'm happy.

Thanks!

EDIT: To clarify, I had also previously removed the async as mentioned above, but that wasn't enough. That in combination with the 'left' to 'center' change did the trick.

[yamalcaraz]

@twiecki I see, but I think I am also using the one fixed by @drorata correctly. See image below, the "async" was removed from the line as in (https://github.com/drorata/pelican-plugins/commit/d8b3ef2365d88f8e662afea5d9d52f3df939f267), so it is supposed to work, but still does not on my machine. Tell me if there are more details that I can provide that can help. Thanks!

[yamalcaraz]

Ok, I found out about my problem, it seems that my problem was not about the async call nor the center. It was another issue about my theme pelican-bootstrap3. It turns out that the theme was using an older version of the mathjax source src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" which should be: src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML"

I fixed it in my fork of pelican-themes here.

Anyway thanks for the help!

[twiecki]

@yamalcaraz Please send a PR.

[yamalcaraz]

Ok, this will be actually my first pull request. I hope it helps!