Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[gatsby-plugin-mdx] gatsby-remark-mathjax doesn't work #16983

Closed
satouriko opened this issue Aug 23, 2019 · 20 comments
Closed

[gatsby-plugin-mdx] gatsby-remark-mathjax doesn't work #16983

satouriko opened this issue Aug 23, 2019 · 20 comments

Comments

@satouriko
Copy link

@satouriko satouriko commented Aug 23, 2019

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
Copy link

@gatsbot gatsbot bot commented Sep 13, 2019

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! 💪💜

@gatsbot gatsbot bot added the stale? label Sep 13, 2019
@satouriko
Copy link
Author

@satouriko satouriko commented Sep 14, 2019

Any update here?

@gatsbot
Copy link

@gatsbot gatsbot bot commented Sep 25, 2019

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!

@gatsbot gatsbot bot closed this Sep 25, 2019
@satouriko
Copy link
Author

@satouriko satouriko commented Sep 26, 2019

Replying doesn't keep the issue open ☹️

@LekoArts LekoArts reopened this Sep 26, 2019
@LekoArts LekoArts removed the stale? label Sep 26, 2019
@gatsbot
Copy link

@gatsbot gatsbot bot commented Oct 17, 2019

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! 💪💜

@gatsbot gatsbot bot added the stale? label Oct 17, 2019
@Mrazator
Copy link

@Mrazator Mrazator commented Oct 31, 2019

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
Copy link
Author

@satouriko satouriko commented Nov 2, 2019

@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 (hanai/gatsby-remark-mathjax#1 (comment))
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
Copy link
Author

@satouriko satouriko commented Nov 2, 2019

@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
Copy link

@Mrazator Mrazator commented Nov 4, 2019

@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 gatsbot bot added the stale? label Nov 25, 2019
@gatsbot
Copy link

@gatsbot gatsbot bot commented Nov 25, 2019

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
Copy link

@github-actions github-actions bot commented Dec 6, 2019

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! 💪💜

@github-actions github-actions bot closed this Dec 6, 2019
@LekoArts LekoArts reopened this Dec 11, 2019
@LekoArts LekoArts removed the stale? label Dec 11, 2019
@hanai
Copy link

@hanai hanai commented Dec 14, 2019

@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
Copy link
Author

@satouriko satouriko commented Dec 15, 2019

@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:

image

With gatsby-plugin-mdx:

image

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

<undefined></undefined>

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

@satouriko
Copy link
Author

@satouriko satouriko commented Dec 15, 2019

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
Copy link
Author

@satouriko satouriko commented Dec 15, 2019

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
Copy link

@janmaltel janmaltel commented Dec 17, 2019

@rikakomoe I don't know whether this is helps you but the solution in
#6648 (comment)
allowed me to use maths (using katex, NOT mathjax) in combination with gatsby-plugin-mdx.

@wardpeet wardpeet self-assigned this Dec 18, 2019
@wardpeet
Copy link
Member

@wardpeet wardpeet commented Dec 18, 2019

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
}

@johno johno self-assigned this Dec 18, 2019
@github-actions
Copy link

@github-actions github-actions bot commented Mar 7, 2021

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 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.
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
Copy link

@github-actions github-actions bot commented Jun 7, 2021

Hey again!

It’s been 60 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 comment on 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! 💪💜

@github-actions github-actions bot closed this Jun 7, 2021
@YiniXu9506
Copy link

@YiniXu9506 YiniXu9506 commented Aug 2, 2021

@satouriko I also encountered this problem. Did you fix it finally?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
9 participants