[IPython-dev] mathjax not rendering in notebook

Mon Aug 13 15:00:52 EDT 2012

Hi,

On Mon, Aug 13, 2012 at 1:42 AM, Matthias BUSSONNIER
<bussonniermatthias at gmail.com> wrote:
>
> Le 13 août 2012 à 08:28, Matthew Brett a écrit :
>
>> Hi,
>>
>> On Sat, Aug 11, 2012 at 12:04 PM, Matthias BUSSONNIER
>> <bussonniermatthias at gmail.com> wrote:
>>>
>>> Le 11 août 2012 à 20:53, Matthew Brett a écrit :
>>>
>>>> Yo,
>>>>
>>>> On Fri, Aug 10, 2012 at 8:06 PM, Fernando Perez <fperez.net at gmail.com> wrote:
>>>>> On Fri, Aug 10, 2012 at 4:21 PM, Matthew Brett <matthew.brett at gmail.com> wrote:
>>>>>>
>>>>>> In the notebook this renders as "$$ \begin{array}{c} y_{11} \cr y_{12}
>>>>>> \mathtt{t}i \cr y{13} \end{array} $$" - i.e. somehow rejected by
>>>>>> mathjax.   The following make it render correctly:
>>>>>>
>>>>>> 1) y_3 instead of y_{3}
>>>>>> 2) removing _i of \mathtt{t}_i
>>>>>
>>>>> It seems the thing that confuses it most is the mathtt call.  If I
>>>>> remove it altogether (and using \\\ for line separators), then I can
>>>>> use y_{3, 4} and t_{i, j} no problem.  Or, if there are no complex
>>>>> subscripts, the mathtt call by itself is OK.  But there's something
>>>>> very brittle inside that is messing up mathjax's processing of this.
>>>>>
>>>>> Filed it here, b/c I'm out of ideas:
>>>>> https://github.com/ipython/ipython/issues/2289
>>>>
>>>> As a matter of interest, and from great ignorance, where in ipython
>>>> would I look for explanations of different behavior of mathjax in a
>>>> markdown cell in the notebook to mathjax in a standalone html page
>>>> like the one above?  Is there a good track to follow for debugging?
>>>
>>> a quick grep in the source tell me that the 2 places that triggers mathjax rendering are
>>> IPython/frontend/html/notebook/static/js
>>> cell.js:            MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
>>> outputarea.js:            MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
>>>
>>> You could try to deactivate auto rendering and do it manually to check the source before/after rendering if you see an error in what is published.
>>
>> I'm afraid I am not sure what you mean by the sentence above, is there
>> any chance you could unpack it a little?  Sorry, I am completely
>> unfamiliar with the notebook internals, but I'm happy to give it a go
>> if someone can give me a few lines of orientation,
>
> Sorry, I'm not a pro of mathjax either.
> in sum up, you publish latex in a div with a special class, then call
>
> MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
>
> which will scan the page for theses div and 'render' it.
>
> MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
> is called when a cell is rendered or, when something is pushed in an output area.
>
> commenting those line in
> in IPyhton/frontend/html/notebook/static/js/(cell | outputarea).js
>  will publish the "raw" latex that you would have a chance to inspect/modify before calling
> MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
> >From the JS console yourself to render.
>
> at least that where I would look first using firefox firebug, or Chrome/Safari development panel.
>
> Does this make more sense ?

Thanks - yes - the pointer to the Chrome developer panel got me a
little further.

I think what is happening is that some other script (?markdown) is
getting to the TeX before it gets to mathjax.

Specifically, if I put the mal-functioning TeX into a cell:

$$
\begin{array}{c}
y_1 \cr
y_2 \mathtt{t}_i \cr
y_{3}
\end{array}
$$

and put a breakpoint on the line:

MathJax.Hub.Queue(["Typeset",MathJax.Hub]);

in cell.js, the html in the cell before rendering is this:

<p>$$
\begin{array}{c}
y_1 \cr
y_2 \mathtt{t}<em>i \cr
y</em>{3}
\end{array}
$$</p>

Notice the stray <em> .. </em> tags.  If I do a tiny edit to the
malfunctioning TeX so that it renders correctly (removing the {} round
the last '3'):

$$
\begin{array}{c}
y_1 \cr
y_2 \mathtt{t}_i \cr
y_3
\end{array}
$$

then the html before MathJax gets it is:

<p>$$
\begin{array}{c}
y_1 \cr
y_2 \mathtt{t}_i \cr
y_3
\end{array}
$$</p>

So I think something in the notebook is inserting the <em> .. </em>
tags into the TeX, and this is busting the rendering.   I've attached
a fuller output of the html before and after rendering.

What could be doing this?  Is there a way of stopping this
preprocessing of TeX?  Could this also explain the need for three `\`
for end-of-line instead of two?

Cheers,

Matthew
-------------- next part --------------
Bad before:

<div class="cell text_cell border-box-sizing ui-widget-content ui-corner-all" tabindex="2"><div class="text_cell_input border-box-sizing" style="display: block; "><div class="CodeMirror CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 107px; left: 21px; "><textarea style="position: absolute; padding: 0; width: 1px; height: 1em" wrap="off" autocorrect="off" autocapitalize="off"></textarea></div><div class="CodeMirror-scrollbar cm-sb-nonoverlap" style="display: none; "><div class="CodeMirror-scrollbar-inner"></div></div><div class="CodeMirror-scroll cm-s-default CodeMirror-focused" tabindex="-1" draggable="false"><div style="position: relative"><div style="position: relative; top: 0px; "><div class="CodeMirror-gutter" style="display: none; "><div class="CodeMirror-gutter-text"></div></div><div class="CodeMirror-lines"><div style="position: relative; z-index: 0; outline: none; "><div style="position: absolute; width: 100%; height: 0px; overflow: hidden; visibility: hidden;"><pre>$$<span id="CodeMirror-temp-1d0725"> </span></pre></div><pre class="CodeMirror-cursor" style="top: 102px; left: 16px; visibility: hidden; "> </pre><pre class="CodeMirror-cursor" style="visibility: hidden"> </pre><div style="position: relative; z-index: -1; display: none; "><div class="CodeMirror-selected" style="position: absolute; left: 120px; top: 17px; right: 1705px; height: 17px"></div></div><div style=""><pre>$$</pre><pre>\begin{array}{c}</pre><pre>y_1 \cr</pre><pre>y_2 \mathtt{t}_i \cr</pre><pre>y_{3}</pre><pre>\end{array}</pre><pre>$$</pre></div></div></div></div></div></div></div></div><div class="text_cell_render border-box-sizing rendered_html" tabindex="-1" style="display: none; "><p>$$
\begin{array}{c}
y_1 \cr
y_2 \mathtt{t}<em>i \cr
y</em>{3}
\end{array}
$$</p></div></div>

Bad after:

<div class="cell text_cell border-box-sizing" tabindex="2"><div class="text_cell_input border-box-sizing" style="display: none; "><div class="CodeMirror CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 107px; left: 21px; "><textarea style="position: absolute; padding: 0; width: 1px; height: 1em" wrap="off" autocorrect="off" autocapitalize="off"></textarea></div><div class="CodeMirror-scrollbar cm-sb-nonoverlap" style="display: none; "><div class="CodeMirror-scrollbar-inner"></div></div><div class="CodeMirror-scroll cm-s-default" tabindex="-1" draggable="false"><div style="position: relative"><div style="position: relative; top: 0px; "><div class="CodeMirror-gutter" style="display: none; "><div class="CodeMirror-gutter-text"></div></div><div class="CodeMirror-lines"><div style="position: relative; z-index: 0; outline: none; "><div style="position: absolute; width: 100%; height: 0px; overflow: hidden; visibility: hidden;"><pre>$$<span id="CodeMirror-temp-1d0725"> </span></pre></div><pre class="CodeMirror-cursor" style="top: 102px; left: 16px; visibility: hidden; "> </pre><pre class="CodeMirror-cursor" style="visibility: hidden"> </pre><div style="position: relative; z-index: -1; display: none; "><div class="CodeMirror-selected" style="position: absolute; left: 120px; top: 17px; right: 1705px; height: 17px"></div></div><div style=""><pre>$$</pre><pre>\begin{array}{c}</pre><pre>y_1 \cr</pre><pre>y_2 \mathtt{t}_i \cr</pre><pre>y_{3}</pre><pre>\end{array}</pre><pre>$$</pre></div></div></div></div></div></div></div></div><div class="text_cell_render border-box-sizing rendered_html" tabindex="-1" style="display: block; "><p>$$
\begin{array}{c}
y_1 \cr
y_2 \mathtt{t}<em>i \cr
y</em>{3}
\end{array}
$$</p></div></div>

Good before:

<div class="cell text_cell border-box-sizing ui-widget-content ui-corner-all" tabindex="2"><div class="text_cell_input border-box-sizing" style="display: block; "><div class="CodeMirror CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 107px; left: 21px; "><textarea style="position: absolute; padding: 0; width: 1px; height: 1em" wrap="off" autocorrect="off" autocapitalize="off"></textarea></div><div class="CodeMirror-scrollbar cm-sb-nonoverlap" style="display: none; "><div class="CodeMirror-scrollbar-inner"></div></div><div class="CodeMirror-scroll cm-s-default CodeMirror-focused" tabindex="-1"><div style="position: relative"><div style="position: relative; top: 0px; "><div class="CodeMirror-gutter" style="display: none; "><div class="CodeMirror-gutter-text"></div></div><div class="CodeMirror-lines"><div style="position: relative; z-index: 0; outline: none; "><div style="position: absolute; width: 100%; height: 0px; overflow: hidden; visibility: hidden;"><pre>$$<span id="CodeMirror-temp-6c48a4"> </span></pre></div><pre class="CodeMirror-cursor" style="top: 102px; left: 16px; "> </pre><pre class="CodeMirror-cursor" style="visibility: hidden"> </pre><div style="position: relative; z-index: -1; display: none; "></div><div style=""><pre>$$</pre><pre>\begin{array}{c}</pre><pre>y_1 \cr</pre><pre>y_2 \mathtt{t}_i \cr</pre><pre>y_3</pre><pre>\end{array}</pre><pre>$$</pre></div></div></div></div></div></div></div></div><div class="text_cell_render border-box-sizing rendered_html" tabindex="-1" style="display: none; "><p>$$
\begin{array}{c}
y_1 \cr
y_2 \mathtt{t}_i \cr
y_3
\end{array}
$$</p></div></div>

Good after:

<div class="cell text_cell border-box-sizing" tabindex="2"><div class="text_cell_input border-box-sizing" style="display: none; "><div class="CodeMirror CodeMirror-wrap"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 107px; left: 21px; "><textarea style="position: absolute; padding: 0; width: 1px; height: 1em" wrap="off" autocorrect="off" autocapitalize="off"></textarea></div><div class="CodeMirror-scrollbar cm-sb-nonoverlap" style="display: none; "><div class="CodeMirror-scrollbar-inner"></div></div><div class="CodeMirror-scroll cm-s-default" tabindex="-1"><div style="position: relative"><div style="position: relative; top: 0px; "><div class="CodeMirror-gutter" style="display: none; "><div class="CodeMirror-gutter-text"></div></div><div class="CodeMirror-lines"><div style="position: relative; z-index: 0; outline: none; "><div style="position: absolute; width: 100%; height: 0px; overflow: hidden; visibility: hidden;"><pre>$$<span id="CodeMirror-temp-6c48a4"> </span></pre></div><pre class="CodeMirror-cursor" style="top: 102px; left: 16px; "> </pre><pre class="CodeMirror-cursor" style="visibility: hidden"> </pre><div style="position: relative; z-index: -1; display: none; "></div><div style=""><pre>$$</pre><pre>\begin{array}{c}</pre><pre>y_1 \cr</pre><pre>y_2 \mathtt{t}_i \cr</pre><pre>y_3</pre><pre>\end{array}</pre><pre>$$</pre></div></div></div></div></div></div></div></div><div class="text_cell_render border-box-sizing rendered_html" tabindex="-1" style="display: block; "><p><span class="MathJax_Preview"></span><div class="MathJax_Display" role="textbox" aria-readonly="true" style="text-align: left; "><span class="MathJax" id="MathJax-Element-13-Frame" style=""><nobr><span class="math" id="MathJax-Span-241" style="margin-left: 0em; "><span style="display: inline-block; position: relative; width: 2.009em; height: 0px; font-size: 121%; "><span style="position: absolute; clip: rect(2.321em 1000em 6.225em -0.429em); top: -4.523em; left: 0em; "><span class="mrow" id="MathJax-Span-242"><span class="mtable" id="MathJax-Span-243" style="padding-right: 0.1667em; padding-left: 0.1667em; "><span style="display: inline-block; position: relative; width: 1.676em; height: 0px; "><span style="position: absolute; clip: rect(2.321em 1000em 5.866em -0.596em); top: -4.164em; left: 0em; "><span style="display: inline-block; position: relative; width: 1.676em; height: 0px; "><span style="position: absolute; clip: rect(3.368em 1000em 4.432em -0.596em); top: -5.211em; left: 50%; margin-left: -0.451em; "><span class="mtd" id="MathJax-Span-244"><span class="mrow" id="MathJax-Span-245"><span class="msubsup" id="MathJax-Span-246"><span style="display: inline-block; position: relative; width: 0.901em; height: 0px; "><span style="position: absolute; clip: rect(1.894em 1000em 2.922em -0.596em); top: -2.526em; left: 0em; "><span class="mi" id="MathJax-Span-247" style="font-family: STIXGeneral-Italic; ">y</span><span style="display: inline-block; width: 0px; height: 2.526em; "></span></span><span style="position: absolute; top: -1.967em; left: 0.445em; "><span class="mn" id="MathJax-Span-248" style="font-size: 70.7%; font-family: STIXGeneral-Regular; ">1</span><span style="display: inline-block; width: 0px; height: 2.208em; "></span></span></span></span></span></span><span style="display: inline-block; width: 0px; height: 4em; "></span></span><span style="position: absolute; clip: rect(3.229em 1000em 4.432em -0.596em); top: -3.94em; left: 50%; margin-left: -0.838em; "><span class="mtd" id="MathJax-Span-249"><span class="mrow" id="MathJax-Span-250"><span class="msubsup" id="MathJax-Span-251"><span style="display: inline-block; position: relative; width: 0.901em; height: 0px; "><span style="position: absolute; clip: rect(1.894em 1000em 2.922em -0.596em); top: -2.526em; left: 0em; "><span class="mi" id="MathJax-Span-252" style="font-family: STIXGeneral-Italic; ">y</span><span style="display: inline-block; width: 0px; height: 2.526em; "></span></span><span style="position: absolute; top: -1.967em; left: 0.445em; "><span class="mn" id="MathJax-Span-253" style="font-size: 70.7%; font-family: STIXGeneral-Regular; ">2</span><span style="display: inline-block; width: 0px; height: 2.208em; "></span></span></span></span><span class="msubsup" id="MathJax-Span-254"><span style="display: inline-block; position: relative; width: 0.774em; height: 0px; "><span style="position: absolute; clip: rect(1.755em 1000em 2.722em -0.547em); top: -2.526em; left: 0em; "><span class="texatom" id="MathJax-Span-255"><span class="mrow" id="MathJax-Span-256"><span class="mi" id="MathJax-Span-257" style="font-family: STIXGeneral-Regular; ">?</span></span></span><span style="display: inline-block; width: 0px; height: 2.526em; "></span></span><span style="position: absolute; top: -2.058em; left: 0.509em; "><span class="mi" id="MathJax-Span-258" style="font-size: 70.7%; font-family: STIXGeneral-Italic; ">i</span><span style="display: inline-block; width: 0px; height: 2.208em; "></span></span></span></span></span></span><span style="display: inline-block; width: 0px; height: 4em; "></span></span><span style="position: absolute; clip: rect(3.368em 1000em 4.442em -0.596em); top: -2.74em; left: 50%; margin-left: -0.451em; "><span class="mtd" id="MathJax-Span-259"><span class="mrow" id="MathJax-Span-260"><span class="msubsup" id="MathJax-Span-261"><span style="display: inline-block; position: relative; width: 0.901em; height: 0px; "><span style="position: absolute; clip: rect(1.894em 1000em 2.922em -0.596em); top: -2.526em; left: 0em; "><span class="mi" id="MathJax-Span-262" style="font-family: STIXGeneral-Italic; ">y</span><span style="display: inline-block; width: 0px; height: 2.526em; "></span></span><span style="position: absolute; top: -1.967em; left: 0.445em; "><span class="mn" id="MathJax-Span-263" style="font-size: 70.7%; font-family: STIXGeneral-Regular; ">3</span><span style="display: inline-block; width: 0px; height: 2.208em; "></span></span></span></span></span></span><span style="display: inline-block; width: 0px; height: 4em; "></span></span></span><span style="display: inline-block; width: 0px; height: 4.164em; "></span></span></span></span></span><span style="display: inline-block; width: 0px; height: 4.523em; "></span></span></span><span style="border-left-width: 0em; border-left-style: solid; display: inline-block; overflow: hidden; width: 0px; height: 4.416em; vertical-align: -1.906em; "></span></span></nobr></span></div><script type="math/tex; mode=display" id="MathJax-Element-13">
\begin{array}{c}
y_1 \cr
y_2 \mathtt{t}_i \cr
y_3
\end{array}
</script></p></div></div>