{{ message }}

# gatsbyjs / gatsby Public

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.

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

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

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

opened this issue Aug 23, 2019 · 20 comments
Labels

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

bot added the stale? label Sep 13, 2019

### satouriko commented Sep 14, 2019

 Any update here?

### 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!

bot closed this Sep 25, 2019

### satouriko commented Sep 26, 2019

 Replying doesn't keep the issue open ☹️

reopened this Sep 26, 2019
removed the stale? label Sep 26, 2019

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

bot added the stale? label Oct 17, 2019

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

bot added the stale? label Nov 25, 2019

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

bot closed this Dec 6, 2019
reopened this Dec 11, 2019
removed the stale? label Dec 11, 2019

### 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 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: With gatsby-plugin-mdx: With gatsby-plugin-mdx and gatsby-transformer-remark:  So how do I render that formula right with gatsby-mdx?

### satouriko commented Dec 15, 2019 • edited

 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 

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

 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 commented Dec 15, 2019 • edited

 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 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.

self-assigned this Dec 18, 2019

### 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 } 

self-assigned this Dec 18, 2019
mentioned this issue Apr 16, 2020
mentioned this issue Apr 22, 2020
removed their assignment May 29, 2020
mentioned this issue Jun 16, 2020

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

bot closed this Jun 7, 2021

### YiniXu9506 commented Aug 2, 2021 • edited

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

to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet