Skip to content
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 · 25 comments
Closed

Kramdown does not seem to render math blocks #735

TMorville opened this issue Dec 27, 2016 · 25 comments

Comments

@TMorville
Copy link

@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
Copy link
Owner

@mmistakes 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
Copy link
Author

@TMorville 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
Copy link
Contributor

@justinrummel 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
Copy link
Owner

@mmistakes 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
Copy link
Owner

@mmistakes 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
Copy link
Author

@TMorville TMorville commented Dec 29, 2016

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

@yuzhangbit
Copy link

@yuzhangbit 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
Copy link
Owner

@mmistakes 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
Copy link

@yuzhangbit 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
Copy link
Owner

@mmistakes 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
Copy link

@yuzhangbit 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
Copy link
Owner

@mmistakes 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
Copy link

@yuzhangbit yuzhangbit commented Feb 21, 2017

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

@mmistakes
Copy link
Owner

@mmistakes 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
Copy link

@yuzhangbit 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 mentioned this issue Nov 16, 2017
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
mmistakes#735

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

@benslack19 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
Copy link
Owner

@mmistakes 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
Copy link

@benslack19 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
Copy link
Owner

@mmistakes 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
Copy link

@benslack19 benslack19 commented Mar 19, 2018

This makes sense, thanks.

@benslack19
Copy link

@benslack19 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!

@asarkar
Copy link

@asarkar asarkar commented Nov 21, 2018

Has anyone been able to get Latex code block working? I took @mmistakes suggested changes, and then some more from this blog post, but what I get is a jumbled mess. Inline expressions work, but not blocks of code/equations.
latex

I've checked the blogs of the people who showed interest in this ticket, and surprisingly, none of their blog posts use Latex in code blocks.
https://benslack19.github.io
https://yuzhangbit.github.io

I might be missing something, because I know very little about web development, but I don't think it should be rocket science to ask for something like the following in my blog.
screen shot 2018-11-21 at 1 35 41 pm
(taken from here)

@benslack19
Copy link

@benslack19 benslack19 commented Nov 22, 2018

Hi @asarkar ,

I hadn't updated my blog in a while but my last post had some rendering of Latex code.

You can see the actual webpage here and how I wrote it in my markdown here.

You can see from the above conversation where I faced some sticking points. Hope this is useful and good luck.

Cheers,
Ben

@sudhirln92
Copy link

@sudhirln92 sudhirln92 commented Apr 3, 2020

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> 
miguelarbesu added a commit to miguelarbesu/miguelarbesu.github.io that referenced this issue Apr 15, 2020
@benslack19
Copy link

@benslack19 benslack19 commented May 9, 2020

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

miguelarbesu added a commit to miguelarbesu/miguelarbesu.github.io that referenced this issue Jul 12, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants
You can’t perform that action at this time.