Math rendering problem

[mathieuLacroix]

Hi,

Remark.js is really great for generating slides but I have problem to integrate math formula in slides (with katex or mathjax).
The examples given in the wiki work well but many formula cannot be correctly displayed. For instance, using double \sum symbol does not work. In the examples, changing $$e^{i\pi} + 1 = 0$$ by $$\sum_{i = 1}^n \sum_{j = 1}^n x_{ij} = 0$$ does not work anymore.
Is there a way to include more complex formula in the slides? The problem does not come from mathjax and katex in general because they can display such kind of formulas (with double sum for instance).

Best,
Mathieu

[mathieuLacroix]

Hi,

I looked into more details for the issue and I found the problem but I am not able to correct it (my javascript is not good enough for this 😢).
When a math formula contains 2 underscores and brace symbols, the underscores are replaced by the html tags <em> and </em> in the html output by remarkjs.

For instance, suppose that the code markdown contains:

1. This is a product \\(x_1 \times x_2\\) which works!
2. This is a product \\(x_1 \times x_{12}\\) which doesn't work!

The HTML output by remark.js is the following:

<ol>
<li>This is a product \(x_1 \times x_2\) which works!</li>
<li>This is a product \(x<em>1 \times x</em>{12}\) which doesn't work!</li>
</ol>

and so the second math formula cannot be displayed correctly!

I hope it helps in correcting the bug.

Best,
Mathieu

[frfeng]

Hi Mathieu,

Thanks for your insight about the issue. An (ugly) workaround is to add a backslash to escape each underscore. For example, the following works for me.

$$\sum\_{i = 1}^n \sum\_{j = 1}^n x\_{ij} = 0$$ 

I do hope someone can fix the original issue.

[mathieuLacroix]

Hi Fred,

Thanks a lot for the tip!!!
It was not clear (at least for me 😄) that every special character such as \ and _ should be escaped.

My goal would be to write latex formulas without escaping anything. As a first step is, I modified my html file (I can't even compile the project so I cannot try to modify the source code of remark) in order to avoid to escape every underscore and every \ in formulas delimited by $ or $$. For $$.
Hence, you can now write something like:

$$\begin{array}{ll}
\max & x_1 + 3x_2\\
s.t & 6x_1 + 7 x_2 \leq 18\\
& 3x_{34} + 3x_{23} \leq 27\\
& x \geq 0
\end{array}
$$

and it works! If for some reason, you have trouble with this preprocessing, you just need to delimit your formulas with \\( and \\) (inline case) or with \\[ and \\].

Here is my code to add in the html file (at the beginning of the scipt, before remark.create()):

    function replaceBsInline(match, p1, offset, string){
      return "\\\\(" + p1.replaceAll("_", "\\_") + "\\\\)";
    } 


    function replaceBs(match, p1, offset, string){
      p1 = p1.replaceAll("\\\\", "\\\\\\\\");
      s = "\\\\[" + p1.replaceAll("_", "\\_") + "\\\\]";
      return s;
    }

    s = document.body.innerHTML;
    s = s.replaceAll(/\$\$([^]+?)\$\$/g, replaceBs);
    s = s.replaceAll(/\$(.+?)\$/g, replaceBsInline);
    document.body.innerHTML = s;

I only tried with two formulas so I cannot guarantee the results in any case!

Best,
Mathieu

[frfeng]

Hi Mathieu,

Your solution works for me w.r.t. not having to escape _ and \ now. Thanks!

However, it is not displaying curly brackets now. For example, without your script, I can display the { and } by escaping it twice (like shown below).

$$A=\\{1, 2\\}$$

I don't fully understand what you did in the script to fix it. But I thought you might be interested :) Thanks!

[mathieuLacroix]

Hi Fred,

You're right, there's some problem!
Could you just try with this code? It seems working for me now

    function replaceBsInline(match, p1, offset, string){
      p1 = p1.replaceAll("\\", "\\\\");
      return "\\\\(" + p1.replaceAll("_", "\\_") + "\\\\)";
    } 


    function replaceBs(match, p1, offset, string){
      p1 = p1.replaceAll("\\", "\\\\");
      s = "\\\\[" + p1.replaceAll("_", "\\_") + "\\\\]";
      return s;
    }

    s = document.body.innerHTML;
    s = s.replaceAll(/\$\$([^]+?)\$\$/g, replaceBs);
    s = s.replaceAll(/\$(.+?)\$/g, replaceBsInline);
    document.body.innerHTML = s;

Now, you can juste write $x \in \{0,1\}^n$ to have curly brackets.

Best,
Mathieu

[frfeng]

Hi Mathieu,

This new version works perfectly with the curly bracket. Thank you!

Now, here's the rabbit hole.

I often use the following line to highlight a formula.

$\require{color}\colorbox{yellow}{$x_1^2$}$

But now MathJax does not render the formula and simply displays the following (for the in-line case).

\require{color}\colorbox{yellow}{\)x_1^2\(}

Using $$ as the delimiters it will render the formula but without the correct subscript.

The problem seems to have to do with the inner dollar signs.

Highlighting a formula is something that I use quite often, and it'd be nice if this fix still supports it. But no worries if you don't have time to look into it.

[frfeng]

Hi Mathieu,

Just to document another thing that stopped working is like the example below, where the \alpha inside the \text{} is not rendered. It was working fine previously. Thanks.

$$\text{This is $\alpha$.}$$

[frfeng]

One more thing that stops working is the following:

.center[This is a variable $x$.]

It is now rendered as "This is a variable (x)."

[frfeng]

The following stopped working as well. Any inline underscore inside a \text{} really.

$$\text{This is $x_1$}$$

[mathieuLacroix]

Hi Fred,

Sorry for the delay, I do not have much time right now.

I do not know how to solve the different problems. It mainly comes from the fact that \\[ and $$ (resp. \\( and $) are not equivalent as I was supposing (at least with my configuration of mathrenderer). Let me explain: in the following

$$ \text{This is $ \alpha $.} $$

\\[ \text{This is $ \alpha $.} \\]

$$ \text{This is \\( \alpha \\).} $$

\\[ \text{This is \\( \alpha \\).} \\]

the first 3 formulas are correctly rendered but not the last one (considering that you remove my code).
Hence, since my code consists in replacing $$ by the associated \\[ and \\] and replacing $ by the associated \\( and \\), it always produces wrong code. Moreover, with my code, you cannot use $$ or $ without this being replaced.

I do not know enough to find a solution because I do not understand why there is no equivalence between the delimiters.
Any help or explanation is welcome :)

Right now, I think it is preferable I think to remove my code and add backslashs everywhere!

Best,
Mathieu

[frfeng]

Hi Mathieu,

Thank you for the insights. I think I might have made it work (at least on my machine)*.

But first, all the four formulas in your previous reply render correctly on my machine without your code. Below are my configurations for your reference.

<script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>
<script src="https://cdn.bootcss.com/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_HTMLorMML&delayStartupUntil=configured"></script>

MathJax.Hub.Config({
    tex2jax: {
    skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'], 
    inlineMath: [['$','$'], ['\\(','\\)']]
    },
});

So I made some changes to your code (see below). And now all the issues that I described in my previous replies were gone (Edit: I just found it actually creates some new issues*. See the bottom) One main thing I found is that your regex pattern for the inline /\$(.+?)\$/g would actually match both inline and display mode delimiters (i.e., both single $ and double dollar sign $$). So there's really no need to have another replacement function replaceBs (actually that might have messed things up).

Below is what I used.

function replaceBsInline(match, p1, offset, string){
  return "$" + p1.replaceAll("_", "\\_") + "$";
} 

s = document.body.innerHTML;

s = s.replaceAll(/\$(.+?)\$/g, replaceBsInline);

document.body.innerHTML = s;

• Edit: I just found the above code does not work for the formula that has the dollar signs in multiple lines. For example.

<!-- this works -->

$$\sum_{i = 1}^n \sum_{j = 1}^n x_{ij} = 0$$   

<!-- this doesn't work -->

$$
\sum_{i = 1}^n \sum_{j = 1}^n x_{ij} = 0       
$$

[frfeng]

Ok, so here's what works best for me.

First, I will not attempt to solve the issue of having to escape \. You will still need to do that, for example, $$ \\{ a, b \\} $$ to show the curly brackets. It seems to me this is a much more difficult task, as there are many cases in which \ should not be escaped, for example, \alpha, \sum, \text{}, \\(, \\[. I'm not sure if there's going to be a good/clean way to do this.

So I'll only try to solve the original issue raised in this post, that is, having to escape the _ when there are more than one in the same formula. Here's what has been working for me. It was based on Mathieu's code with some tweaks.

function replaceBsInline(match, p1, offset, string){
  p1 = p1.replaceAll("\\_", "_");    // this is to avoid replacing "_" twice with nested delimiters (e.g., $$\text{I'm $x_1$}$$)
  return "$" + p1.replaceAll("_", "\\_") + "$";
} 

function replaceBs(match, p1, offset, string){
  return "$$" + p1.replaceAll("_", "\\_") + "$$";
}

s = document.body.innerHTML;

s = s.replaceAll(/\$\$([^]*?)\$\$/g, replaceBs);
s = s.replaceAll(/\$(.*?)\$/g, replaceBsInline);

document.body.innerHTML = s;

Hope this is helpful for other people.

[mathieuLacroix]

Hi Fred,

Thank you for your configuration. Actually, I use katex instead of mathjax but maybe I will switch if I can't configure katex correctly (I have not tried yet).

I agree it is a difficult problem :) !
I will look carefully your solution when I will prepare my next presentation!
Thanks a lot for your help and comments!
Best,
Mathieu