Reveal.js: MathJax sometimes fails in markdown sections/slides

[karlroberts]

HI,
Thanks for Reveal.js it's awesome. I have been using the MaxJax plugin and found it works well in most cases but then sometimes it fails when used in MarkDown sections.

It seems that when the math statement gets too complex it fails, but the same math is rendered fine in a normal html section. Perhaps one too many { causes markdown a problem?

Here are some example that demonstrate it.

-- the following is in a markdown slide:-

#### example math functions
* this inline math works  $ (\theta_0,\theta_1) $ 
* the following none inline math works Fine

$$ J(\theta_0,\theta_1) = \sum_i^m  $$

* however this math fails to render as MathJax

$$ J(\theta_0,\theta_1) = \sum_{i=0}  $$

NB the above works in http://cdn.mathjax.org/mathjax/latest/test/sample-dynamic-2.html or when placed in a HTML section rather than a markdown section.

note that when I look at the page element the working one is rendered as:-

<p><span class="MathJax_Preview" style="color: inherit;"></span><div class="MathJax_SVG_Display" style="text-align: center;"><span class="MathJax_SVG" id="MathJax-Element-12-Frame" role="math" style="font-size: 105%; display: inline-block;"><svg xmlns:xlink="http://www.w3.org/1999/xlink" width="15.176ex" height="6.667ex" viewBox="0 -1623.2 6525.4 2882" style="vertical-align: -3.035ex; margin: 1px 0ex;"><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJMATHI-4A" x="0" y="0"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJMAIN-28" x="638" y="0"></use><g transform="translate(1032,0)"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJMATHI-3B8" x="0" y="0"></use><use transform="scale(0.707)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJMAIN-30" x="670" y="-213"></use></g><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJMAIN-2C" x="1963" y="0"></use><g transform="translate(2412,0)"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJMATHI-3B8" x="0" y="0"></use><use transform="scale(0.707)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJMAIN-31" x="670" y="-213"></use></g><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJMAIN-29" x="3343" y="0"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJMAIN-3D" x="4015" y="0"></use><g transform="translate(5076,0)"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJSZ2-2211" x="0" y="0"></use><use transform="scale(0.707)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJMATHI-69" x="849" y="-1558"></use><use transform="scale(0.707)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#MJMATHI-6D" x="583" y="1640"></use></g></g></svg></span></div><script type="math/tex; mode=display" id="MathJax-Element-12"> J(\theta_0,\theta_1) = \sum_i^m  </script></p>

but the failing one is rendered as:-

<p>$$ J(\theta<em>0,\theta_1) = \sum</em>{i=0}  $$</p>

As mentioned above the failing math works if I place it in a normal html section.
--- the following is in index.html

<section>
  <p>
    $$ J(\theta_0,\theta_1) = \sum_{i^m} $$
 </p>
 <p>
    $$ J(\theta_0,\theta_1) = {1\over2m} \sum_i^m \left(h_\theta\left(x^{(i)}\right) - y^{(i)}\right)^2 $$
 </p>
</section>

for compleatness here is my reveal initialize function found in index.html

<script>
            // Full list of configuration options available at:
            // https://github.com/hakimel/reveal.js#configuration
            Reveal.initialize({
                controls: true,
                progress: true,
                history: true,
                center: true,

                transition: 'none', // none/fade/slide/convex/concave/zoom

                math: {
                    mathjax: 'https://cdn.mathjax.org/mathjax/latest/MathJax.js',
                    config: 'TeX-AMS_HTML', 
                },

                // Optional reveal.js plugins
                dependencies: [{
                        src: 'http://cdn.jsdelivr.net/reveal.js/3.0.0/lib/js/classList.js',
                        condition: function() {
                            return !document.body.classList;
                        }
                    }, {
                        src: 'http://cdn.jsdelivr.net/reveal.js/3.0.0/plugin/markdown/marked.js',
                        condition: function() {
                            return !!document.querySelector('[data-markdown]');
                        }
                    }, {
                        src: 'http://cdn.jsdelivr.net/reveal.js/3.0.0/plugin/markdown/markdown.js',
                        condition: function() {
                            return !!document.querySelector('[data-markdown]');
                        }
                    }, {
                        src: 'http://cdn.jsdelivr.net/reveal.js/3.0.0/plugin/highlight/highlight.js',
                        async: true,
                        async: true,
                        callback: function() {
                            hljs.initHighlightingOnLoad();
                        }
                    }, {
                        src: 'http://cdn.jsdelivr.net/reveal.js/3.0.0/plugin/zoom-js/zoom.js',
                        async: true
                    }, {
                        src: 'http://cdn.jsdelivr.net/reveal.js/3.0.0/plugin/notes/notes.js',
                        async: true
                    },
                    // MathJax
                    {
                        src: 'http://cdn.jsdelivr.net/reveal.js/3.0.0/plugin/math/math.js',
                        async: true
                    }
                ]
            });
        </script>

I hope you can spot the problem.

Cheers

Karl

[rajgoel]

Hi Karl, your problem might be related to this issue: #702

Did you try putting your equation in backticks $$ J(\theta_0,\theta_1) = \sum_{i=0} $$?

[joshnroy]

Just ran into the same problem. Backticks fixed it. Thanks!

[kammoh]

This issue still persists and the only workaround that did the job for me was the backticks. Would it be possible to add the workaround on the main documentation page?

[hakimel]

@xnorme Good suggestion – I've added a note about using backticks in the readme