using katex, '&' alignment symbol displays as 'amp;'

Question

I am using katex to render math.

Generally, to get this to work I link to the files katex.min.js and katex.min.css from a cdn, which is one of the ways the directions suggest.

I wrap what needs to be rendered in tags and give all the same class. For example:

<span class='math'>\begin{bmatrix}a & b \\c & d\end{bmatrix}</span>

And inside a script tag I apply the following:

var math = document.getElementsByClassName('math');
for (var i = 0; i < math.length; i++) {
  katex.render(math[i].innerHTML, math[i]);
}

So, my implementation works but there is a problem in what katex returns. The output of the above gives me:

This exact same question is asked here:

https://github.com/j13z/reveal.js-math-katex-plugin/issues/2

But I can't understand any of it.

Did you find a solution for that? Same problem here. – Luke Skywalker May 19 '18 at 19:47 — Luke Skywalker, May 19 '18 at 19:47
Not yet. Still suffering. – dactyrafficle Aug 03 '18 at 02:22 — dactyrafficle, Aug 03 '18 at 02:22

score 2 · Accepted Answer · answered Dec 13 '18 at 04:01

The solution is to use element.textContent, not element.innerHTML.

If I use a form like what follows, the matrix will be rendered properly.

var math = document.getElementsByClassName('math');
for (var i = 0; i < math.length; i++) {
  katex.render(math[i].textContent, math[i]); // <--element.textContent
}

score 0 · Answer 2 · answered Apr 25 '19 at 15:01

A solution that works for me is the following (it is more of a hack rather than a fix):

<script type="text/javascript">

     //first we define a function
     function replaceAmp(str,replaceWhat,replaceTo){
         replaceWhat = replaceWhat.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
         var re = new RegExp(replaceWhat, 'g');
         return str.replace(re,replaceTo);
    }
    //next we use this function to replace all occurences of 'amp;' with ""
    var katexText = $(this).html();
    var html = katex.renderToString(String.raw``+katexText+``, {
        throwOnError: false
    });
    //hack to fix amp; error
    var amp = '<span class="mord mathdefault">a</span><span class="mord mathdefault">m</span><span class="mord mathdefault">p</span><span class="mpunct">;</span>';                                 
    var html = replaceAmp(html, amp, "");


</script>

score 0 · Answer 3 · answered Jun 13 '20 at 17:22

0

function convert(input) {
    var input = input.replace(/amp;/g, '&'); //Find all 'amp;' and replace with '&'
    input=input.replace(/&&/g, '&'); //Find all '&&' and replace with '&'. For leveling 10&x+ &3&y+&125&z = 34232
    var html = katex.renderToString(input, {
        throwOnError: false});
    return html
}

answered Jun 13 '20 at 17:22

Vasiliy Migovich

1

1

Welcome to SO. While this code snippet may be the solution, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please check [how-to-answer](https://stackoverflow.com/help/how-to-answer) for more details. – alan.elkin Jun 13 '20 at 20:47

score -1 · Answer 4 · answered Aug 16 '18 at 06:45

-1

Which version are you using?

Edit the src/utils.js and comment line number 51 to 55 after updated run in terminal npm run build command.

answered Aug 16 '18 at 06:45

user49758

51
8

Please be more specific on exactly what is being deleted and which version this applies to. – Jude Fernandes Feb 12 '19 at 15:29
@Jude: I have using `KaTeX 0.10.0` and no need to delete and just comment `//` in `utils.js` file – user49758 Feb 13 '19 at 05:20
I am using katex with react so my src/utils.js file looks a bit different, can you post exactly what lines are being commented out. – Jude Fernandes Feb 13 '19 at 05:46
1

@Jude: Go to Line Number 51 to 55 and comment the line. Exact syntax is: `const ESCAPE_LOOKUP = { // "&": "&", // ">": ">", // "<": "<", // "\"": """, // "'": "'", };` – user49758 Feb 13 '19 at 06:46

using katex, '&' alignment symbol displays as 'amp;'

4 Answers4

Linked