Xaringan: Inline Math Rendering Fix

[emitanaka]

This issue refers to the question on stackoverflow here.

Currently, remark.js converts $y=x$ to <code class="remark-inline-code">\(y=x\)</code> and the xaringan code here detects the math if it the inner html code starts with \( and end with \), subsequently releasing it (by removing <code>) and letting mathjax do its magic.

BUT remark.js converts .someclass[$y=x$] to <span class="someclass"><code class="remark-inline-code">(y=x)</code></span> which loses the \ in front of the brackets.

The hack to fix it is to now include detection of maths if the inner html code starts with ( and ends with ) as below:

slideshow._releaseMath = function(el) {
  var i, text, code, codes = el.getElementsByTagName('code');
  for (i = 0; i < codes.length;) {
    code = codes[i];
    if (code.parentNode.tagName !== 'PRE' && code.childElementCount === 0) {
      text = code.textContent;
      if (/^\\\((.|\s)+\\\)$/.test(text) || /^\\\[(.|\s)+\\\]$/.test(text) ||
          /^\$\$(.|\s)+\$\$$/.test(text) ||
          /^\\begin\{([^}]+)\}(.|\s)+\\end\{[^}]+\}$/.test(text)) {
        code.outerHTML = code.innerHTML;  // remove <code></code>
        continue;
      }
      // new code here 
      if (/^\((.|\s)+\)$/.test(text)) {
        code.outerHTML = "\\" + code.innerHTML.replace(/.$/,"\\)");
        continue;
      }
    }
    i++;
  }
};

This hack will convert any inline code that starts with ( and ends with ) though! E.g. (x <- 3). So it seems like something that would need to be addressed at remark.js?

[yihui]

Thanks a lot for the investigation, Emi! You are right that remark.js eats backslashes when <code> is present in elements with custom classes (i.e. .class[ ]). I think this is a bug of remark.js, and there isn't much ninjutsu I can apply here. Converting any <code>( )</code> to \( \) is too risky and will lead to too many false positives.

If the user doesn't prefer writing HTML code (<span class="footnote"> as in your SO answer), the only hack I can think of is use double backslashes on parentheses, e.g.

# A Test

- This is a test<sup>1</sup>

.footnote[<sup>1</sup> This includes `\\(\delta+\frac{2}{3}\\)` math.]

You may amend your SO answer if you think this could be of any help. Thanks again!

[emitanaka]

Ah that's a nice hack! I'll add it to my SO answer :)

[jorgesinval]

How would I do it to apply this example?

95%CI ]1.23; 3.2[