Search code examples
browsermathjaxmathematical-expressionsdollar-sign

$$ and \ \ are not rendering for math equation in browser using MathJax

I'm rendering mathematical equation in browser using MathJax with following code :

Dynamic HTML content :

<td style="vertical-align: top; text-align: left; width: 95%;">
<span>$$If\ \ f(x) \ \ is \ continuous \ on \ [0,8]\ defined \ as$$<br>
$$f(x) = x^2 +ax + 6 \ \ \ \ for \ \ 0 <x < 2$$<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $$= 3x +2 \ \ \ \ \ \ for \ 2<x<4$$<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $$= 2ax + 5b \ \ \ \ \ \ \ for \ 2<x<8$$<br>
Find <em>a</em>&nbsp;and <em>b</em></span>
</td>

Mathjax Config. : 

<script type='text/x-mathjax-config'>
MathJax.Hub.Config({                  
tex2jax: {                  
inlineMath: [ ['$','$'], ["\[","\]"] ],                  
},                  
"HTML-CSS": {                  
linebreaks: {                  
automatic: true                   
}                  
}                  
});                  
</script>                  
<script type="text/javascript" async src = "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>

Output :

enter image description here

Here we can see that text till 'defined as' rendered perfectly. But whats wrong with remaining. If anybody have solution, then please !

Thanks !

UPDATE

As per suggestion given by Niyoko and Peter, I've replace '<' with '<' from dynamically generated HTML string 

&lt;td style="vertical-align: top; text-align: left; width: 95%;">
                                    &lt;span>$$If\ \ f(x) \ \ is \ continuous \ on \ [0,8]\ defined \ as$$&lt;br>
$$f(x) = x^2 +ax + 6 \ \ \ \ for \ \ 0 &lt;x &lt; 2$$&lt;br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $$= 3x +2 \ \ \ \ \ \ for \ 2&lt;x&lt;4$$&lt;br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $$= 2ax + 5b \ \ \ \ \ \ \ for \ 2&lt;x&lt;8$$&lt;br>
Find &lt;em>a&lt;/em>&nbsp;and &lt;em>b&lt;/em>&lt;/span>
                                &lt;/td>

But its not working and breaking whole expression rendering.

Solution

  • If you want to align equations, don't use spaces like that. Use \\ to create line break, wrap all equations with \begin{align} and \end{align} and mark align point with &. Your < sign also conflict with html tag. Use &lt; and &gt; instead.

    <div>
$$
If\ \ f(x) \ \ is \ continuous \ on \ [0,8]\ defined \ as \\
\begin{align}
f(x) & = x^2 +ax + 6  \ \ \ \ for \ \ 0&lt;x&lt;2 \\
 & = 3x +2 \ \ \ \ \ \  for \ 2&lt;x&lt;4 \\
 & = 2ax + 5b  \ \ \ \ \ \ \ for \ 2&lt;x&lt;8
\end{align}
$$

Find $a$&nbsp;and $b$


</div>

<script type='text/x-mathjax-config'>
MathJax.Hub.Config({                  
tex2jax: {                  
    inlineMath: [ ['$','$'], ["\[","\]"] ],                  
},                  
"HTML-CSS": {                  
    linebreaks: {                  
        automatic: true                   
    }                  
}                  
});                  
</script>                  
<script type="text/javascript" async src = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>

    If you cannot change HTML, then just replace < with &lt;

    <td style="vertical-align: top; text-align: left; width: 95%;">
<span>$$If\ \ f(x) \ \ is \ continuous \ on \ [0,8]\ defined \ as$$<br>
$$f(x) = x^2 +ax + 6 \ \ \ \ for \ \ 0 &lt;x &lt; 2$$<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $$= 3x +2 \ \ \ \ \ \ for \ 2&lt;x&lt;4$$<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $$= 2ax + 5b \ \ \ \ \ \ \ for \ 2&lt;x&lt;8$$<br>
Find <em>a</em>&nbsp;and <em>b</em></span>
</td>


<script type='text/x-mathjax-config'>
MathJax.Hub.Config({                  
tex2jax: {                  
    inlineMath: [ ['$','$'], ["\[","\]"] ],                  
},                  
"HTML-CSS": {                  
    linebreaks: {                  
        automatic: true                   
    }                  
}                  
});                  
</script>                  
<script type="text/javascript" async src = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>