Kramdown does not seem to render math blocks #735

TMorville · 2016-12-27T13:45:59Z

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

The text was updated successfully, but these errors were encountered:

mmistakes · 2016-12-27T14:56:45Z

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

TMorville · 2016-12-28T14:10:22Z

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 · 2016-12-28T14:49:09Z

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 · 2016-12-28T16:01:56Z

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 · 2016-12-28T16:25:09Z

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 · 2016-12-29T13:17:35Z

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

yuzhangbit · 2017-02-20T21:27:05Z

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 · 2017-02-20T22:33:58Z

@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 · 2017-02-20T22:51:53Z

@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 · 2017-02-20T22:59:00Z

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

yuzhangbit · 2017-02-20T23:12:49Z

@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 · 2017-02-21T01:28:13Z

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 · 2017-02-21T01:49:27Z

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

mmistakes · 2017-02-21T01:50:33Z

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 · 2017-02-21T02:06:16Z

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

mmistakes#735

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

benslack19 · 2018-03-19T06:20:30Z

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 · 2018-03-19T10:51:22Z

@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 %}
<!-- MathJax -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
{% endif %}

benslack19 · 2018-03-19T14:56:29Z

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 · 2018-03-19T15:16:36Z

@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 · 2018-03-19T15:35:15Z

This makes sense, thanks.

benslack19 · 2018-03-20T03:36:00Z

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 · 2018-11-21T21:27:38Z

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 · 2018-11-22T11:55:52Z

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 · 2020-04-03T14:11:55Z

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>

benslack19 · 2020-05-09T16:33:29Z

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

asarkar · 2024-09-17T01:28:05Z

Note that MathJax 3 is a complete rewrite of MathJax 2, and there are many breaking changes. They provide a website for converting your v2 config to v3.
https://mathjax.github.io/MathJax-demos-web/convert-configuration/convert-configuration.html

mmistakes closed this as completed Dec 29, 2016

mmistakes mentioned this issue Jan 13, 2017

Latex does not render #769

Closed

mmistakes added Type: Bug Type: Support labels Aug 23, 2017

mmistakes mentioned this issue Nov 16, 2017

Can it support formula? like latex #1355

Closed

5 tasks

Accio 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

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

Work with latex script

c53475a

mmistakes#735

pateskinasy mentioned this issue Mar 13, 2018

Author_profile not showing for single layout #1579

Closed

6 tasks

benslack19 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."

CloudChaoszero mentioned this issue Mar 28, 2020

Markdown Not Showing on Post CloudChaoszero/CloudChaoszero.github.io#3

Closed

mmistakes mentioned this issue Jul 16, 2020

Math markdown doesn't render on the final post. #2605

Closed

orcahmlee mentioned this issue Jan 10, 2021

Mathjax support orcahmlee/orcahmlee.github.io#3

Closed

wangskyGit added a commit to wangskyGit/wangskyGit.github.io that referenced this issue Mar 2, 2023

try config in mmistakes/minimal-mistakes#735

8e9cd54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Kramdown does not seem to render math blocks #735

Kramdown does not seem to render math blocks #735

TMorville commented Dec 27, 2016

mmistakes commented Dec 27, 2016

TMorville commented Dec 28, 2016

justinrummel commented Dec 28, 2016

mmistakes commented Dec 28, 2016

mmistakes commented Dec 28, 2016

TMorville commented Dec 29, 2016

yuzhangbit commented Feb 20, 2017 •

edited

Loading

mmistakes commented Feb 20, 2017

yuzhangbit commented Feb 20, 2017 •

edited

Loading

mmistakes commented Feb 20, 2017

yuzhangbit commented Feb 20, 2017 •

edited

Loading

mmistakes commented Feb 21, 2017

yuzhangbit commented Feb 21, 2017 •

edited

Loading

mmistakes commented Feb 21, 2017

yuzhangbit commented Feb 21, 2017

benslack19 commented Mar 19, 2018

mmistakes commented Mar 19, 2018

benslack19 commented Mar 19, 2018

mmistakes commented Mar 19, 2018

benslack19 commented Mar 19, 2018

benslack19 commented Mar 20, 2018

asarkar commented Nov 21, 2018 •

edited

Loading

benslack19 commented Nov 22, 2018

sudhirln92 commented Apr 3, 2020 •

edited

Loading

benslack19 commented May 9, 2020

asarkar commented Sep 17, 2024

Kramdown does not seem to render math blocks #735

Kramdown does not seem to render math blocks #735

Comments

TMorville commented Dec 27, 2016

Environment informations

Expected behavior

Steps to reproduce the behavior

Conversion

Markdown Processing

mmistakes commented Dec 27, 2016

TMorville commented Dec 28, 2016

justinrummel commented Dec 28, 2016

mmistakes commented Dec 28, 2016

mmistakes commented Dec 28, 2016

TMorville commented Dec 29, 2016

yuzhangbit commented Feb 20, 2017 • edited Loading

mmistakes commented Feb 20, 2017

yuzhangbit commented Feb 20, 2017 • edited Loading

mmistakes commented Feb 20, 2017

yuzhangbit commented Feb 20, 2017 • edited Loading

mmistakes commented Feb 21, 2017

yuzhangbit commented Feb 21, 2017 • edited Loading

mmistakes commented Feb 21, 2017

yuzhangbit commented Feb 21, 2017

benslack19 commented Mar 19, 2018

mmistakes commented Mar 19, 2018

benslack19 commented Mar 19, 2018

mmistakes commented Mar 19, 2018

benslack19 commented Mar 19, 2018

benslack19 commented Mar 20, 2018

asarkar commented Nov 21, 2018 • edited Loading

benslack19 commented Nov 22, 2018

sudhirln92 commented Apr 3, 2020 • edited Loading

benslack19 commented May 9, 2020

asarkar commented Sep 17, 2024

yuzhangbit commented Feb 20, 2017 •

edited

Loading

yuzhangbit commented Feb 20, 2017 •

edited

Loading

yuzhangbit commented Feb 20, 2017 •

edited

Loading

yuzhangbit commented Feb 21, 2017 •

edited

Loading

asarkar commented Nov 21, 2018 •

edited

Loading

sudhirln92 commented Apr 3, 2020 •

edited

Loading