Mathjax doesn't render in-text equation like $a+b=c$ #2256

lanfeiying · 2019-12-05T22:16:34Z

Hi,
I use MathJax in my HTML file, and I found it doesn't work for in-text equation, such as $a+b=c$.
For independent equation, it works well, such as $$x+y=z$$.
My web browser is the newest google chrome.

A minimal work example:

<!doctype html>
<html lang="en-us">
<head>
    <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full"></script>
    <style type="text/css">
	.main
    {
    	text-align: center; 
    	width: 30%;
    }
    </style>
</head>
<body>
    <div class="main">
        <p>
	    this is a text $a+b=c$. <!-- mathjax doesn't render this in-text equation -->
	    $$x+y=z$$ <!-- this equation works well -->
	</p>
    </div>
</body>
</html>

The text was updated successfully, but these errors were encountered:

zorkow · 2019-12-06T00:16:05Z

Three points:

The cdn is not longer active, so you are working with a pretty old version for MathJax. See here:
https://www.mathjax.org/cdn-shutting-down/
You might want to change from MathJax v2.7.x to the new v3.0.
And you need to tell MathJax explicitly what the inline math delimiters are, to prevent confusion when $ signs are used for other purposes. The following should work:

<!doctype html>
<html lang="en-us">
  <head>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
    <script>
      MathJax = {
        tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}
      };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script" async></script>
    <style type="text/css">
      .main
      {
      text-align: center; 
      width: 30%;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <p>
	this is a text $a+b=c$. 
	$$x+y=z$$ 
      </p>
    </div>
  </body>
</html>

lanfeiying · 2019-12-06T10:44:34Z

Three points:

The cdn is not longer active, so you are working with a pretty old version for MathJax. See here:
https://www.mathjax.org/cdn-shutting-down/

You might want to change from MathJax v2.7.x to the new v3.0.

And you need to tell MathJax explicitly what the inline math delimiters are, to prevent confusion when $ signs are used for other purposes. The following should work:
<!doctype html>
<html lang="en-us">
  <head>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
    <script>
      MathJax = {
        tex: {inlineMath: [['$', '$'], ['\$', '\$']]}
      };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script" async></script>
    <style type="text/css">
      .main
      {
      text-align: center; 
      width: 30%;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <p>
	this is a text $a+b=c$. 
	$$x+y=z$$ 
      </p>
    </div>
  </body>
</html>

Thanks very much for your answer, it works.

lanfeiying closed this as completed Dec 6, 2019

joielechong mentioned this issue Feb 12, 2020

doesn't render in-text equation like $a+b=c$ shah-xad/flutter_tex#23

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mathjax doesn't render in-text equation like $a+b=c$ #2256

Mathjax doesn't render in-text equation like $a+b=c$ #2256

lanfeiying commented Dec 5, 2019

zorkow commented Dec 6, 2019

lanfeiying commented Dec 6, 2019

Mathjax doesn't render in-text equation like $a+b=c$ #2256

Mathjax doesn't render in-text equation like $a+b=c$ #2256

Comments

lanfeiying commented Dec 5, 2019

zorkow commented Dec 6, 2019

lanfeiying commented Dec 6, 2019