CODEWITHSUNDEEP
reactjsmathjax
soma iyappan
soma iyappan

Reputation: 542

How to Break Line in MathJax using ReactJS

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

Upvotes: 4

Views: 1112

Answers (2)

subas pathak
subas pathak

Reputation: 1

config = {
           CommonHTML: { linebreaks: { automatic: true } },
           showMathMenu: false,
           'HTML-CSS': {
               linebreaks: { automatic: true, width: 'container' },
               scale: 150
           }
        };

Upvotes: -1

fast-reflexes
fast-reflexes

Reputation: 5186

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.

Upvotes: 2

Related Questions