Why my integral is not displaying bigger with react-better-mathjax?

Question

I'm using react-better-mathjax and when i display integrals, it is not displaying as it should.

As-to-say bigger....

It displays this :

Instead of that :

Here is the code :

var mj = "\\(V_{\\frac{1}{2}sphere(h)} = \\int_0^R \\pi(R^2 - h^2) dh \\)";

return (
          <MathJaxContext>
              <MathJax dynamic hideUntilTypeset={ "every" } >
                  {mj}
               </MathJax>
           </MathJaxContext>
    );

Maybe it's a Latex problem, but I didn't find the answer on the documentation.

Can somebody help me please ?

Answer 1

In both Latex, AsciiMath and MathML there is something called display mode and inline mode where display mode is supposed to be used for standalone equations which can use more space and inline mode is supposed to be used for equations in text. In AsciiMath you have to decide whether you want to use display mode or inline mode for the entire document but for Latex and MathML you can use both side by side.

For Latex, which you seem to use, you have to set which delimiters to use for display mode and inline mode in the configuration:

  const config = {
    loader: { load: ["[tex]/html"] },
    tex: {
      packages: { "[+]": ["html"] },
      inlineMath: [["$", "$"]],
      displayMath: [["\\(", "\\)"]]
    }
  }

With this config, you should delimit inline mode math with $ and $. and display mode math with \\( and \\).

With this in place, your example will be typeset like you want.

Sandbox: https://codesandbox.io/s/user-example-9-gbsxe