Gatsby: Improper spacing between lines in KaTex aligned expressions

[thomaskuntzz]

Update: Updating the version of KaTeX used by gatsby-remark-katex solved the problem!

I'm using the gatsby-remark-katex plugin to render math expressions in Gatsby. When writing expressions aligned across multiple lines with \begin{aligned} ... \end{aligned}, the lines aren't spaced properly (too close to each other). Here is what I get:

I guess the problem doesn't come from my config, because the screenshot is from the official Gatsby KaTeX example to which I just added the following expression:

$
\begin{aligned}
    m &= \frac{\Delta y}{\Delta x} \\
      &= \frac{y_m - y_a}{x_m - x_a} \\
      &= \frac{f(a+h) - f(a)}{a+h- a} \\
      &= \frac{f(a+h) - f(a)}{h}
\end{aligned}
$

The thing I don't get is that if I create a barebones HTML file in which I include the two links the docs says to include and just try to render the same expression, I get a far better spacing:

And I get good spacing too when using the preview on KaTe's website.

That's why I suspect the issue might have something to do with the way KaTex support is implemented in Gatsby. I'm not 100% sure it comes from the implementation in Gatsby, because the docs says that:

KaTeX follows LaTeX's rendering of aligned and matrix environments unlike
MathJax. When displaying fractions one above another in these vertical
layouts there may not be enough space between rows for people who are used to
MathJax's rendering. The distance between rows can be adjusted by using
\\[0.1em] instead of the standard line separator distance.

But if the problem is with KaTex itself, then I don't know why it works better when I try in a simple HTML page or on the demo on the official site...

Any one knows if this comes from KaTeX or Gatsby and how to fix it?

Thanks!

[KyleAMathews]

@jeffrey-xiao any idea what's happening here?

[jeffrey-xiao]

I've narrowed down the issue to this issue: https://github.com/Khan/KaTeX/issues/531

It seems to be fixed in a later version of katex (E.G 0.8.3).

[thomaskuntzz]

Yes, maybe updating the version of KaTeX used in gatsby-remark-katex might make things better.
I wanted to try out locally (by using the "using katex" demo of the official repo), but I can't figure out how to use the local version of the plugin – in which I updated KaTeX to a 0.8.3 (or at least tried to, I don't even know if this worked...) – instead of the NPM one. I tried to put the plugin's package in a plugins subfolder, as the doc suggests, but it doesn't work and it breaks the site...

[KyleAMathews]

@thomaskuntzz could you file a PR updating the package?

[KyleAMathews]

package.json of gatsby-remark-katex that is :-)

[thomaskuntzz]

Sure, but I can't test locally...

[thomaskuntzz]

Updating the version of KaTeX used by gatsby-remark-katex indeed solved the problem! Thanks!