New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Kramdown does not seem to render math blocks #735

Closed
TMorville opened this Issue Dec 27, 2016 · 21 comments

Comments

Projects
None yet
5 participants
@TMorville

TMorville commented Dec 27, 2016

  • This is a question about using the theme.
  • I believe this to be a bug with the theme --- not Jekyll, GitHub Pages or one of the bundled plugins.
  • This is a feature request.
  • I have updated all gems with bundle update.
  • I have tested locally with bundle exec jekyll build.

Environment informations

  • Minimal Mistakes version: 4.1.1
  • github-pages or jekyll gem version: github-pages 91
  • Operating system: OS x Sierra 10.12.2

Expected behavior

Kramdown does not render math when using the $$ \equation $$ syntax as prescribed on https://kramdown.gettalong.org/syntax.html#math-blocks.

Steps to reproduce the behavior

Here is a link to my repo. As you can see under e.g. under inverted pendulum.md there should be two bits of math $$ x_t $$ and $$\theta_t$$ which should display as math. But when building (or serving), it does not render.

I have forked Minimal Mistakes and implemented as shown. Everything else works fine.

Here are my _congif.yml settings for markdown:

Conversion

markdown: kramdown
highlighter: rouge
lsi: false
excerpt_separator: "\n\n"
incremental: false

Markdown Processing

kramdown:
input: GFM
hard_wrap: false
auto_ids: true
footnote_nr: 1
entity_output: as_char
toc_levels: 1..6
smart_quotes: lsquo,rsquo,ldquo,rdquo
enable_coderay: false

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Dec 27, 2016

Owner

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

Owner

mmistakes commented Dec 27, 2016

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

@TMorville

This comment has been minimized.

Show comment
Hide comment
@TMorville

TMorville Dec 28, 2016

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?

TMorville commented Dec 28, 2016

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?

@justinrummel

This comment has been minimized.

Show comment
Hide comment
@justinrummel

justinrummel Dec 28, 2016

Contributor

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

Contributor

justinrummel commented Dec 28, 2016

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

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Dec 28, 2016

Owner

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
/_includes/footer/custom.html

Owner

mmistakes commented Dec 28, 2016

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
/_includes/footer/custom.html

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Dec 28, 2016

Owner

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.

Owner

mmistakes commented Dec 28, 2016

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.

@TMorville

This comment has been minimized.

Show comment
Hide comment
@TMorville

TMorville Dec 29, 2016

@mmistakes perfect. That solution works like a charm. Thanks.

TMorville commented Dec 29, 2016

@mmistakes perfect. That solution works like a charm. Thanks.

@yuzhangbit

This comment has been minimized.

Show comment
Hide comment
@yuzhangbit

yuzhangbit Feb 20, 2017

I have a question related to this topic. If I enable the MathJax like what @mmistakes said, the math equations can show up normally on the page of posts. But the the author profile is gone in the post that is using the single layout. As long as I remove the equation, the author profile will show up. It seem the $$ causes the problem. Any solution to this problem? Thank you ~

yuzhangbit commented Feb 20, 2017

I have a question related to this topic. If I enable the MathJax like what @mmistakes said, the math equations can show up normally on the page of posts. But the the author profile is gone in the post that is using the single layout. As long as I remove the equation, the author profile will show up. It seem the $$ causes the problem. Any solution to this problem? Thank you ~

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Feb 20, 2017

Owner

@yuzhangbit You have an example? My gut is telling me there's something with the MathJax script or possibly some sort of CSS interference. But without seeing the code it's hard to say.

Owner

mmistakes commented Feb 20, 2017

@yuzhangbit You have an example? My gut is telling me there's something with the MathJax script or possibly some sort of CSS interference. But without seeing the code it's hard to say.

@yuzhangbit

This comment has been minimized.

Show comment
Hide comment
@yuzhangbit

yuzhangbit Feb 20, 2017

@mmistakes Thanks for your reply.
This is my repo.
Here is the example post.
If you remove the latex math code

$$SE2$$  
$$SE(3)$$

the author profile will show up.

I add the MathJax script

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

to this file.

yuzhangbit commented Feb 20, 2017

@mmistakes Thanks for your reply.
This is my repo.
Here is the example post.
If you remove the latex math code

$$SE2$$  
$$SE(3)$$

the author profile will show up.

I add the MathJax script

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

to this file.

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Feb 20, 2017

Owner

@yuzhangbit Does that post have the equation added? I'm not seeing any sort of layout issues and the author sidebar is present.

img_6720

Owner

mmistakes commented Feb 20, 2017

@yuzhangbit Does that post have the equation added? I'm not seeing any sort of layout issues and the author sidebar is present.

img_6720

@yuzhangbit

This comment has been minimized.

Show comment
Hide comment
@yuzhangbit

yuzhangbit Feb 20, 2017

@mmistakes Yes. There are two latex math symbols(se2, se3). The sidebar doesn't show up in the desktop browser. I am using Chrome.
debug

yuzhangbit commented Feb 20, 2017

@mmistakes Yes. There are two latex math symbols(se2, se3). The sidebar doesn't show up in the desktop browser. I am using Chrome.
debug

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Feb 21, 2017

Owner

I just tried it in Chrome on the desktop and the sidebar is there.

screen shot 2017-02-20 at 8 27 03 pm

screen shot 2017-02-20 at 8 24 48 pm

You sure you don't have any sort of adblocker extensions installed? They often kill social links and that would explain why the sidebar is gone. Other than that I really don't have any other suggestions as I can't seem to reproduce the issue.

Owner

mmistakes commented Feb 21, 2017

I just tried it in Chrome on the desktop and the sidebar is there.

screen shot 2017-02-20 at 8 27 03 pm

screen shot 2017-02-20 at 8 24 48 pm

You sure you don't have any sort of adblocker extensions installed? They often kill social links and that would explain why the sidebar is gone. Other than that I really don't have any other suggestions as I can't seem to reproduce the issue.

@yuzhangbit

This comment has been minimized.

Show comment
Hide comment
@yuzhangbit

yuzhangbit Feb 21, 2017

@mmistakes Thank you very much! It seems it's the chrome extensions cause the problem.

yuzhangbit commented Feb 21, 2017

@mmistakes Thank you very much! It seems it's the chrome extensions cause the problem.

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Feb 21, 2017

Owner

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.

screen shot 2017-02-20 at 8 45 27 pm

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);
Owner

mmistakes commented Feb 21, 2017

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.

screen shot 2017-02-20 at 8 45 27 pm

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);
@yuzhangbit

This comment has been minimized.

Show comment
Hide comment
@yuzhangbit

yuzhangbit Feb 21, 2017

@mmistakes Ya, this works! 👍 The latest stable version of Opera browser is also able to reproduce this issue.

yuzhangbit commented Feb 21, 2017

@mmistakes Ya, this works! 👍 The latest stable version of Opera browser is also able to reproduce this issue.

@mmistakes mmistakes referenced this issue Nov 16, 2017

Closed

Can it support formula? like latex #1355

0 of 5 tasks complete

Accio added a commit to Accio/accio.github.io that referenced this issue Jan 5, 2018

spannawit added a commit to spannawit/spannawit.github.io that referenced this issue Feb 8, 2018

benslack19 added a commit to benslack19/benslack19.github.io that referenced this issue Mar 19, 2018

added small script for mathjax
mmistakes#735

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

This comment has been minimized.

Show comment
Hide comment
@benslack19

benslack19 Mar 19, 2018

Hi, I'm trying to render LaTex to one of my posts and I seem to be having trouble. Following mmistakes comment on Dec 28, 2016, I did the following:

To /_includes/scripts.html, I added these few lines:

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

Then to my post, I added mathjax: true in the front matter.

The github markdown file is here and the corresponding website page is here.

I'd sincerely appreciate any assistance.

benslack19 commented Mar 19, 2018

Hi, I'm trying to render LaTex to one of my posts and I seem to be having trouble. Following mmistakes comment on Dec 28, 2016, I did the following:

To /_includes/scripts.html, I added these few lines:

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

Then to my post, I added mathjax: true in the front matter.

The github markdown file is here and the corresponding website page is here.

I'd sincerely appreciate any assistance.

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Mar 19, 2018

Owner

@benslack19 Check your browser's console logs. I believe mathjax.org shut down their hosted copy of MathJax.js. You'll need to load the script from somewhere else.

screen shot 2018-03-19 at 6 48 18 am

Try this instead:

{% if site.mathjax == true %}
<!-- MathJax -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
{% endif %}
Owner

mmistakes commented Mar 19, 2018

@benslack19 Check your browser's console logs. I believe mathjax.org shut down their hosted copy of MathJax.js. You'll need to load the script from somewhere else.

screen shot 2018-03-19 at 6 48 18 am

Try this instead:

{% if site.mathjax == true %}
<!-- MathJax -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
{% endif %}
@benslack19

This comment has been minimized.

Show comment
Hide comment
@benslack19

benslack19 Mar 19, 2018

OK thanks @mmistakes. I tried the snippet of code but still had some trouble. From looking at this page, I tried changing the link in src to this

https://rawgit.com/mhchem/MathJax-mhchem/master/mhchem.js
or this
https://cdnjs.cloudflare.com/ajax/libs/mathjax-mhchem/3.3.0/mhchem.js

and in both cases, I kept the suffix ?config=TeX-AMS-MML_HTMLorMML but it's still not working for me. Any other suggestions? Sorry I'm mostly just doing trial and error to troubleshoot.

benslack19 commented Mar 19, 2018

OK thanks @mmistakes. I tried the snippet of code but still had some trouble. From looking at this page, I tried changing the link in src to this

https://rawgit.com/mhchem/MathJax-mhchem/master/mhchem.js
or this
https://cdnjs.cloudflare.com/ajax/libs/mathjax-mhchem/3.3.0/mhchem.js

and in both cases, I kept the suffix ?config=TeX-AMS-MML_HTMLorMML but it's still not working for me. Any other suggestions? Sorry I'm mostly just doing trial and error to troubleshoot.

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Mar 19, 2018

Owner

@benslack19 Other than the snippet I posted above that I have no other advice. I don't personally use LaTex so I'm not going to be much help.

As this isn't a theme issue I'd suggest asking for help on either the Jekyll Talk forums or search through Stackoverflow. This seems like a MathJax issue and you'll likely find help if you widen your search some.

Owner

mmistakes commented Mar 19, 2018

@benslack19 Other than the snippet I posted above that I have no other advice. I don't personally use LaTex so I'm not going to be much help.

As this isn't a theme issue I'd suggest asking for help on either the Jekyll Talk forums or search through Stackoverflow. This seems like a MathJax issue and you'll likely find help if you widen your search some.

@benslack19

This comment has been minimized.

Show comment
Hide comment
@benslack19

benslack19 Mar 19, 2018

This makes sense, thanks.

benslack19 commented Mar 19, 2018

This makes sense, thanks.

@benslack19

This comment has been minimized.

Show comment
Hide comment
@benslack19

benslack19 Mar 20, 2018

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!

benslack19 commented Mar 20, 2018

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment