$$ 和 \ 不使用 MathJax 在浏览器中呈现数学方程式

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

我正在使用 MathJax 和以下代码在浏览器中呈现数学方程式:

动态HTML内容:

<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 配置。 :

<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> 

输出:

在这里我们可以看到 'defined as' 完美呈现的文本。但是留下来有什么不好。如果有人有解决方案,请!

谢谢!

更新

根据 Niyoko 和 Peter 的建议,我将动态生成的 HTML 字符串

中的“<”替换为“<”
&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>

但是它不起作用并且破坏了整个表达式渲染。

如果要对齐方程式,请不要使用那样的空格。使用 \ 创建换行符,用 \begin{align}\end{align} 包裹所有方程式,并用 & 标记对齐点。您的 < 符号也与 html 标签冲突。请改用 &lt;&gt;

<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>

如果无法更改HTML,则只需将<替换为&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>