1

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.

iAkshay
  • 1,143
  • 1
  • 13
  • 35

1 Answers1

0

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>
Niyoko
  • 7,512
  • 4
  • 32
  • 59
  • Thanx for your answer. But as I mentioned in the question, HTML content are generating dynamically (to show subjective question paper). I've just mentioned the piece of code which was not working. So we can't change HTML text. – iAkshay Oct 28 '16 at 06:17
  • Then just replace `<` with `<`. It conflicted with html tag and Mathjax got confused. – Niyoko Oct 28 '16 at 06:19
  • @AkshayGajarlawar – Niyoko Oct 28 '16 at 06:20
  • I've tried it. but not working. Its breaking whole rendering and displaying plain text in browser. – iAkshay Oct 28 '16 at 06:24
  • @AkshayGajarlawar I don't know why. But it's working here. Try Run code snippet. Can you post your HTML again? – Niyoko Oct 28 '16 at 06:28
  • @AkshayGajarlawar Not **all**. But **only** those inside `TEx`. Look at my edited answer, code snippet at the bottom. – Niyoko Oct 28 '16 at 06:45
  • Well, I'm iOS developer and loading html in web view, so need to find a way to do that. Anyway,will get back after done with suggestion given by you @Niyoko – iAkshay Oct 28 '16 at 06:51
  • @AkshayGajarlawar It's your HTML that break your design, but you said you can't change that. There's nothing you can do about it (except adding css maybe if you can). – Niyoko Oct 28 '16 at 07:07
  • https://jpst.it/OPOt ..... working code by replacing code given by you. breaking design – iAkshay Oct 28 '16 at 07:10
  • @AkshayGajarlawar Your code has some part already processed by mathjax. – Niyoko Oct 28 '16 at 07:17
  • oops !! that site rendered equations ... ok ignore it. Thanks for your collaboration Niyoko. – iAkshay Oct 28 '16 at 07:19
  • Note from the future: cdn.mathjax.org is nearing its end-of-life, check https://www.mathjax.org/cdn-shutting-down/ for migration tips. – Peter Krautzberger Apr 11 '17 at 15:42
  • @PeterKrautzberger How sad! – Niyoko Apr 26 '17 at 07:03