Gatsby: [gatsby-plugin-mdx] gatsby-remark-mathjax doesn't work

[satouriko]

Description

gatsby-remark-mathjax doesn't work with gatsby-plugin-mdx

Steps to reproduce

gatsby-mdx-minimal-repro-plugin-mathjax

http://localhost:8000/hello-world/ is rendered by gatsby-transformer-remark
http://localhost:8000/hello-world-mdx/ is rendered by gatsby-plugin-mdx

Expected result

renders

This is my first post on my new fake blog! $a^2 + b^2 = c^2$ How exciting!
$$ a^2 + b^2 = c^2 $$

I’m sure I’ll write a lot more interesting things in the future.

Oh, and here’s a great quote from this Wikipedia on salted duck eggs.

i.e. Equation expressions as is.

Actual result

The mdx version renders <undefined></undefined> at the place of equation.

Environment

gatsby-mdx-minimal-repro-plugin-mathjax

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[satouriko]

Any update here?

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[satouriko]

Replying doesn't keep the issue open ☹️

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[Mrazator]

Hey there, any update on this? I am experiencing the same problem.

For now I solved it by adding mathjax script to the page, so my LaTeX expressions are rendered after the page loads (which takes some time - even 2+ sec). Am I assuming correctly that this plugin (gatsby-remark-mathjax) should render those expressions server-side? If so, it might bring some huge performance benefit to mdx pages that are using LaTeX expressions.

[satouriko]

@Mrazator How did you solve it? I cannot even find a workaround.
It turns out that gatsby-remark-mathjax doesn't render equations at all, it just keep the expressions as it is for mathjax to take over (https://github.com/hanai/gatsby-remark-mathjax/issues/1#issuecomment-429537453)
But with MDX I cannot find a way to make the expression stay unrendered. (Markdown and Latex actually conflicts sometimes hence if it's already rendered by MD, there's no way can mathjax render it properly, e.g. a_1 = a_2)

[satouriko]

@Mrazator I think you have misunderstandings here. This issue is saying that gatsby-remark-mathjax doesn't provide the same, correct functionality working with gatsby-plugin-mdx as with gatsby-transformer-remark. Even it does, it doesn't introduce server-side rendering and mathjax script is still required to display equations.

[Mrazator]

@rikakomoe I don't know what is that plugin since I didn't check. However, SSR of Mathjax expression would really be a nice feature of a gatsby-like "mathjax" plugin.

I solved it by wrapping every math expressions with backtick (inline codeblock) - i.e. `$[some latex expression]$`.

Then I just have a script in html.js included like this:

<script
  defer
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
  dangerouslySetInnerHTML={{ __html: MATHJAX_CONFIG }} />

where MATHJAX_CONFIG is this:

export const MATHJAX_CONFIG = `MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$']],
    displayMath: [['$$','$$']],
    processEscapes: true,
    processEnvironments: true,
    skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
    TeX: { equationNumbers: { autoNumber: "AMS" },
         extensions: ["AMSmath.js", "AMSsymbols.js"] }
  },
  SVG: { linebreaks: { automatic: true } }
})`

And also I have still mathjax plugin in gatsby-config.js:

resolve: `gatsby-plugin-mdx`,
options: {
  extensions: [`.md`],
  gatsbyRemarkPlugins: [
    `gatsby-remark-mathjax`,
  ],
  plugins: [
     `gatsby-remark-mathjax`
 ]
}

I guess it is not the nices solution ever, but it works and I didn't really invest much time into getting know how it works.

i.e.: I am not sure If it is necessary to keep gatsby-remark-mathjax in gatsby-config. I don't know either why it is specified in both gatsbyRemarkPlugins and plugins (btw. what the hell is this plugin field doing?).

So I guess you can take this solution as a starting point, try it out and if you will find a better way, just let me know here, please.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[hanai]

@rikakomoe Hi, I'm the author of gatsby-remark-mathjax. When I created this plugin, there was no server-side render for mathjax, and gatsby-transformer-remark would break latex snippets when convert markdown to html. So I created this plugin to keep latex snippets as raw when transform.

It seems that you don't need to include this plugin in your case.

[satouriko]

@hanai mdx absolutely breaks latex snippets too, I give a little more complex example here

$$
a[i+1]=
\begin{cases}
a[i]+1&S[i]=\text{'a'}\\
a[i]& S[i]\neq\text{'a'}
\end{cases}
$$

With gatsby-remark-mathjax and gatsby-transformer-remark:

With gatsby-plugin-mdx:

With gatsby-plugin-mdx and gatsby-transformer-remark:

<undefined></undefined>

So how do I render that formula right with gatsby-mdx?

[satouriko]

In fact making gatsby-plugin-mdx keep the latex as raw will do the job, by it by default doesn't. As for the example above, it produces

<p>$$
a[i+1]=
\begin{cases}
a[i]+1&amp;S[i]=\text{‘a’}\
a[i]&amp; S[i]\neq\text{‘a’}
\end{cases}
$$</p>

While it should be, like what gatsby-remark-mathjax and gatsby-transformer-remark produces:

$$
a[i+1]=
\begin{cases}
a[i]+1&S[i]=\text{'a'}\\
a[i]& S[i]\neq\text{'a'}
\end{cases}
$$

[satouriko]

This issue is not about SSR.

It is about gatsby-plugin-mdx. gatsby-plugin-mdx claims that it's compatible with plugins of gatsby-transformer-remark. But it doesn't, I cannot find a way to render mathjax formula correctly, as what I can do with gatsby-transformer-remark.

[janmaltel]

@rikakomoe I don't know whether this is helps you but the solution in
https://github.com/gatsbyjs/gatsby/issues/6648#issuecomment-516722534
allowed me to use maths (using katex, NOT mathjax) in combination with gatsby-plugin-mdx.

[wardpeet]

I've been digging into this issue a bit and this is what I found. (this should help @gatsbyjs/themes-core) help fix the problem.

markdown node after gatsby-remark-mathjax

inlineMath {   
  type: 'html',
  value: '$a^2 + b^2 = c^2$',
  data: {
    hName: 'span',
    hProperties: { className: 'inlineMath' },
    hChildren: [ [Object] ]
  },
  position: Position {
    start: { line: 2, column: 44, offset: 44 },
    end: { line: 2, column: 61, offset: 61 },
    indent: []
  }
}
math {
  type: 'html',
  value: '$$\na^2 + b^2 = c^2\n$$',
  data: {
    hName: 'div',
    hProperties: { className: 'math' },
    hChildren: [ [Object] ]
  },
  position: Position {
    start: { line: 4, column: 1, offset: 77 },
    end: { line: 6, column: 3, offset: 98 },
    indent: [ 1, 1 ]
  }
}

After mdx-ast-to-mdx-hast the tree seems like it lost the hName, hProperties & hChildren from the node.

mdx hast tree

{
  type: 'root',
  children: [
    {
      type: 'element',
      tagName: 'p',
      properties: {},
      children: [Array],
      position: [Object]
    },
    { type: 'text', value: '\n' },
    {
      type: 'raw',
      value: '$$\na^2 + b^2 = c^2\n$$',
      position: [Object]
    },
    { type: 'text', value: '\n' },
    {
      type: 'element',
      tagName: 'p',
      properties: {},
      children: [Array],
      position: [Object]
    },
    { type: 'text', value: '\n' },
    {
      type: 'element',
      tagName: 'p',
      properties: {},
      children: [Array],
      position: [Object]
    },
    { type: 'text', value: '\n' },
    {
      type: 'element',
      tagName: 'blockquote',
      properties: {},
      children: [Array],
      position: [Object]
    },
    { type: 'text', value: '\n' },
    {
      type: 'element',
      tagName: 'p',
      properties: {},
      children: [Array],
      position: [Object]
    },
    { type: 'text', value: '\n' },
    {
      type: 'export',
      value: 'export const _frontmatter = {"title":"Hello World Mdx","date":"2015-05-01T22:12:03.284Z","description":"Hello World"}',
      position: [Position]
    }
  ],
  position: {
    start: { line: 1, column: 1, offset: 0 },
    end: { line: 24, column: 118, offset: 957 }
  }
}

So when it tries to render the tag we have this node which gives us an undefined tagname

{
  type: 'element',
  value: '$a^2 + b^2 = c^2$',
  position: {
    start: { line: 2, column: 44, offset: 44 },
    end: { line: 2, column: 61, offset: 61 }
  },
  children: undefined,
  tagName: undefined,
  properties: undefined
}