How to Break Line in MathJax using ReactJS

Question

I'm using MathJax I can't able to break the new line.
I am already tried using <br/> , \nand \\ but its not works for me.

const blockFormula = `x =√(t )   \\
\\mathrm{V}=\\frac{d x}{d t}=\\frac{1}{2} t^{\\frac{-1}{2}}`;

MathJax Doc version 1.0.1

Answer 1

The line-breaks you show are for HTML and for regular Latex. MathJax only treats the MATH MODE PART of Latex, not all of Latex so you need to accomplish line-breaks math mode style. You basically have at least 3 options:

• Use the math mode gather environment:

  <MathJax>
      {
        `$$\\begin{gather}
              x =√(t ) \\\\ 
              \\mathrm{V}=\\frac{d x}{d t}=\\frac{1}{2} t^{\\frac{-1}{2}} \\\\
        \\end{gather}$$`
      }
  </MathJax>
  

• Use the math mode align environment if you also want to align the rows:

  <MathJax>
      {
        `$$\\begin{align}
              x &=√(t ) \\\\ 
              \\mathrm{V}=\\frac{d x}{d t}&=\\frac{1}{2} t^{\\frac{-1}{2}} \\\\
        \\end{align}$$`
      }
  </MathJax>
  

• Since you're doing this in React with HTML, you can also add the different rows to different HTML / React components to accomplish what you want:

  <MathJax>{`$$x =√(t )$$`}</MathJax>
  <MathJax>{`$$\\mathrm{V}=\\frac{d x}{d t}=\\frac{1}{2} t^{\\frac{-1}{2}}$$`}</MathJax>
  

There are probably more ways too.

I took the liberty of using my own better-react-mathjax in the sandbox that I prepared for you, showing all these options using both display math and inline math, but it should work the same in all libraries that correctly uses MathJax with React.