Remark: Math rendering problem

Created on 5 Feb 2021  路  3Comments  路  Source: gnab/remark

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^{ipi} + 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

latex

Most helpful comment

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 :cry:).
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

All 3 comments

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 :cry:).
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

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.

Hi Fred,

Thanks a lot for the tip!!!
It was not clear (at least for me :smile:) 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()`):
```js
    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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

zmonoid picture zmonoid  路  5Comments

stephentu picture stephentu  路  5Comments

juanpabloaj picture juanpabloaj  路  3Comments

benjie picture benjie  路  4Comments

royfrancis picture royfrancis  路  4Comments