gatsby: gatsby-plugin-mdx doesn't render "complex" Katex formulas

@nikbelikov How were you able to get the \begin{align*}...\end{align*} to work properly? Which versions are you using?

please, mention @nikoladev instead 😃

Marked “not stale”. Yeah, we need to do soon a major release for the whole suite of plugins with updated dependencies.

Hi, this comment is just to provide another example of a formula that I couldn’t get to work and to provide a workaround (for this specific case), in case someone is struggling with a similar problem.

My specific (but imo quite general case) is to get some LaTeX formula into a subscript block. While simple things such as indices (e.g., $a_3$) work fine, I couldn’t produce formulas such as $\mathbb{E}_{a_t \sim \pi(s_t)}$, which should render

but which suffers from the same problem as the one described in the original post, i.e.,

SyntaxError: unknown: Expecting Unicode escape sequence \uXXXX (615:6)

  613 | {E}
  614 | {`_`}
> 615 | {a_t \sim \pi(s_t)}
      |       ^
  616 | {`$`}</p>
  617 | /Users/malte/... unknown: Expecting Unicode escape sequence \uXXXX (615:6)

One quite annoying way to make this work is to use a sequence of empty \phantom{} blocks and subscript everyone of them with a single character or symbol. For the example mentioned above this would be to use

$\mathbb{E}_{a_t} \phantom{}_\sim \phantom{}_\pi \phantom{}_{(s_t)}$,

which I used to produce the image shown above. Maybe thhis helps someone until the update with MDX v2 is out 😃

Woooooow, I only now saw your KatexBlock and KatexInline components @nikoladev ! This is 1000x better and easier to use than my stupid hack. This saved my day – thank you!!

You’re welcome 😃

Thanks for letting me know it was hard to find, I’ve updated the intro post for anyone who is looking for a quickfix.

Do you know of an issue / thread that tracks progress on this?

Not really. Here’s a response from a Gatsby employee on them waiting for a stable version 2 of MDX. Only thing I can think of is subscribing to MDX releases (you can click on Watch at the top and then select Custom and then choose Releases to get Github notification of releases).

Woooooow, I only now saw your KatexBlock and KatexInline components @nikoladev ! This is 1000x better and easier to use than my stupid hack. This saved my day – thank you!!

@janmaltel - i tried $\mathbb{E}_{a_t \sim \pi(s_t)}$ on my gatsby app and I am able to render the math equation just fine:

BTW, I am using @mdx-js/mdx and @mdx-js/react v1.6.22. Also, I am using remark-math v3.0.1 and rehype-katex v5.0.0.

Here is the relevant snippet from my gatsby-config.js:

const remarkMath = require(`remark-math`);
const rehypeKatex = require(`rehype-katex`);

// ...
{
  resolve: `gatsby-plugin-mdx`,
  options: {
    defaultLayouts: {
      default: path.resolve(__dirname, `src/templates/mdx-template.jsx`),
    },
    remarkPlugins: [remarkMath],
    rehypePlugins: [rehypeKatex],
  },
},
// ...

Out of curiosity, are you using mdx v2? Because I’ve only encountered the error SyntaxError: unknown: Expecting Unicode escape sequence \uXXXX when trying to upgrade from mdx v1 to mdx v2 on a next.js project.

On a side note, there is a major overhaul in how mdx is parsed in v2 (see https://github.com/mdx-js/mdx/pull/1039) and that could affect the way math equations are rendered. Also, there will be breaking changes mdx v2 so some things that worked in markdown or mdx v1 no longer will work in mdx v2 (i.e., html comments will no longer be supported in mdx v2. see https://github.com/mdx-js/mdx/issues/1042). As already mentioned by the author of mdx, MD !== MDX. I want to add that MDXv1 !== MDXv2

@nikoladev - I tried your complex math formula on a gatsby site that I am working on and it seems to render properly.

the complex math formula:

$$
\begin{aligned}
  \bar{x} &= \dfrac{0+1+2+ \ldots +8}{9} = 3.56 \\
  \bar{y} &= \dfrac{23.5+25+ \ldots +37.5}{9}=30
\end{aligned}
$$

screenshot of rendered complex formula (in dark mode):

However, I am using the latest npm packages (except for remark-math which needs to be on v3 until gatsby-plugin-mdx uses remark 13. Also, I am using rehype-katex instead of remark-html-katex (i believe rehype-katex is recommended over remark-html-katex. I didn’t clone your repo, but just copy/pasted the complex math formula from your repo into my gatsby site to see there was a problem. Apparently, it seems to render correctly.

So in your gatsby-config.js, change:

    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        defaultLayouts: {
          default: require.resolve(path.resolve(__dirname, 'src', 'templates', 'Page.jsx')),
        },
        remarkPlugins: [
          require('remark-math'),
          require('remark-html-katex'),
        ],
      },
    },

to:

    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        defaultLayouts: {
          default: require.resolve(path.resolve(__dirname, 'src', 'templates', 'Page.jsx')),
        },
        remarkPlugins: [require('remark-math')],
        rehypePlugins: [require('rehype-katex')],
      },
    },

And make sure to install rehype-katex (and remove remark-html-katex)

👋 hey we’re working on updating the gatsby remark ecosystem to the latest versions of things which should help out with this issue. If you’ll want to try testing things out to see if katex works better, that’d be really helpful! https://github.com/gatsbyjs/gatsby/discussions/30385