{{ message }}

Kramdown does not seem to render math blocks #735

Closed
opened this issue Dec 27, 2016 · 25 comments
Closed

Kramdown does not seem to render math blocks#735

opened this issue Dec 27, 2016 · 25 comments
Labels

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 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 commented Dec 28, 2016

 Adding   manually to my .md posts worked perfectly. Thanks. Any ideas on how to implement this in a more permanent manner?

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 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 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 %} {% endif %} And then in your post/page's YAML Front Matter you'd add mathjax: true if you wanted the script embedded.

TMorville commented Dec 29, 2016

 @mmistakes perfect. That solution works like a charm. Thanks.
closed this Dec 29, 2016
mentioned this issue Jan 13, 2017

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.

yuzhangbit commented Feb 20, 2017 • edited

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

mmistakes commented Feb 21, 2017

 I just tried it in Chrome on the desktop and the sidebar is there. 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 commented Feb 21, 2017 • edited

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

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. 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 commented Feb 21, 2017

 @mmistakes Ya, this works! 👍 The latest stable version of Opera browser is also able to reproduce this issue.
mentioned this issue Nov 16, 2017
added a commit to Accio/accio.github.io that referenced this issue Jan 5, 2018
 add conditional support for mathjax; see mmistakes/minimal-mistakes#735 
 831bec1 
added a commit to spannawit/spannawit.github.io that referenced this issue Feb 8, 2018
 Work with latex script 
 c53475a 
mmistakes#735
mentioned this issue Mar 13, 2018
added a commit to benslack19/benslack19.github.io that referenced this issue Mar 19, 2018
 added small script for mathjax 
 530696c 
mmistakes#735

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

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 %} {% 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 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. Try this instead: {% if site.mathjax == true %} {% endif %}

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 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 commented Mar 19, 2018

 This makes sense, thanks.

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 commented Nov 21, 2018 • edited

 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. 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. (taken from here)

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
mentioned this issue Mar 28, 2020

sudhirln92 commented Apr 3, 2020 • edited

 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 %} {% endif %} 
added a commit to miguelarbesu/miguelarbesu.github.io that referenced this issue Apr 15, 2020
 Enable mathjax support 
 57db001 
Based on mmistakes/minimal-mistakes#735

benslack19 commented May 9, 2020

 Thank you @sudhirln92. I was updating something else and that snippet helped.
added a commit to miguelarbesu/miguelarbesu.github.io that referenced this issue Jul 12, 2020
 Enable mathjax support 
 cd1bad3 
Based on mmistakes/minimal-mistakes#735
mentioned this issue Jul 16, 2020