Block math and $$ vs {% math %}

[ekstroem]

I've tried to setup my MathJax so that it renders displaymath correctly if I use $$ instead of { math } but with little success.

If I follow the "instructions" and user {% math %} then everything is rendered correctly (in displaymath mode)

{% math %}y_i = b_1 + b_2 x_i + e_i,{% endmath %}

However, if I use LaTeX-like tag then I get the math rendered but the size doesn't not scale to displaymath (and there seems to be a problem with the main column/margin placement too):

$$y_i = b_1 + b_2 x_i + e_i,$$

The HTML-output is also slightly different.

<div class="mathblock"><script type="math/tex; mode=display">y_i = b_1 + b_2 x_i + e_i,</script></div>
<script type="math/tex; mode=display">y_i = b_1 + b_2 x_i + e_i,</script>

So somehow the $$-tags do not add the mathblock div. Is it possible to tweak that easily somehow?

[clayh53]

i've been very busy with work and haven't had time to wrestle with this. I think the issue is that the plugin adds a wrapper 'mathblock' div around a mathjax expression and the CSS targets it successfully. But mathjax uses javascript to create its own set of divs and spans. When the plugin wraps the whole mess in a wrapper div, it will display properly. But without the wrapper div created by the plugin, the CSS has a bunch of non-targeted classes that aren't being 'fixed' to display properly.

My first thought was to just add some of the pre-baked MathJax classes to the CSS. But when I use the inspector, there appear to be a whole jumble of divs and spans nested together to create the Mathjax display elements.

I'll try to dig into the Mathjax docs and figure out how to fix this in the CSS, because I think ultimately that is the easiest and cleanest solution.

For now, I recommend continuing to use the plugin's Liquid wrapper for all standalone block level mathjax expressions. For inline expressions, the $$..$$ appears to work fine, although the size is still a little wonky.

Anybody reading this who knows how Mathjax does its magic is welcome to jump in here with a suggestion.

[mpancorbo]

I succeeded changing all apperances of div.mathblock by div.MathJax_Display in the stylesheet tufte.scss.

[ekstroem]

Hmm. If I do a search-and-replace of div.mathblock to div.MathJax_Display in the stylesheet tufte.scss then I get no change in the output.

[mpancorbo]

@ekstroem You are right. I forgot say:

• You must substitute all the {% math %} stuff by corresponding $..$ or $$ ... $$
• Tell MathJax engine to take this into account. My MathJax call in head.html is:

 <script type="text/x-mathjax-config">
  MathJax.Hub.Config({
  extensions: ["tex2jax.js","color.js"],
  jax: ["input/TeX", "output/HTML-CSS"],
  tex2jax: {
    inlineMath: [ ['$','$'], ["\\(","\\)"] ],
    displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
    processEscapes: true
  },
  "HTML-CSS": {
    preferredFont: "TeX",
    availableFonts: ["STIX","TeX"]
  }
});
</script>
<script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

(BTW the tags \( ... \) and \[ ... \] must double the backslashes: \\( ... \\) and \\[ ... \\] )

I hope this will work for you now.

[ekstroem]

Thanks for helping out with this ... it's still not working tho'. I keep getting the smaller inline sized fonts for displaymath. I also tried with having a \[ \] in me raw file to see if it was the parsing of $$ that didn't work, but nope.

BTW: I'm guessing that <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> is not needed if you set mathjax: true in the options.yml file.

[ekstroem]

Ah. I think I found my mistake. In tufte.scss I should not just search and replace all occurrences of div.mathblock to div.MathJax_Display but I also need the generic CSS format here (ie., change .mathblock to the following).

.MathJax_Display{
  font-size: 1.3rem;
}

Should have found that myself. It's working and I am one happy bunny. If any of you guys ever pop by Copenhagen I'll buy you a beer or two.

I actually think this should be the default setting here for the template.

[clayh53]

I need to change the .scss file to use the baked-in Mathjax available in Kramdown. On May 14, 2016, at 8:01 AM, Claus Ekstrøm notifications@github.com wrote:

Ah. I think I found my mistake. In tufte.scss I should not just search and replace all occurrences of div.mathblock to div.MathJax_Display but I also need the generic CSS format here (ie., change .mathblock.

.MathJax_Display{ font-size: 1.3rem; } Should have found that myself. It's working and I am one happy bunny. If any of you guys ever pop by Copenhagen I'll buy you a beer or two.

I actually think this should be the default setting here for the template.

— You are receiving this because you commented. Reply to this email directly or view it on GitHub

[mpancorbo]

@ekstroem

If any of you guys ever pop by Copenhagen I'll buy you a beer or two.

Yeah... I'll take your offer at some point :-)

[KrnTneja]

@ekstroem I tried the solution you suggested. But the text shifts to left a little somehow still sticking somewhat around the center. For now, because I simply need to copy text from latex files, I do this neat trick. I use following after replacing $$...$$ with &&...&& (which is easier to replace than unsymmetric \\[...\\]):

MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    displayMath: [['&&','&&'], ["\\[","\\]"]], 
    processEscapes: true
  }
});

Somehow introducing a new && markdown is easier than modifying the existing one!