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

Open
rikakomoe opened this issue Aug 23, 2019 · 9 comments
Labels

Comments

@rikakomoe
Copy link

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

@wardpeet wardpeet added the topic: MDX label Aug 23, 2019
@gatsbot

This comment has been minimized.

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

This comment has been minimized.

Copy link
Author

@rikakomoe rikakomoe commented Sep 14, 2019

Any update here?

@gatsbot

This comment has been minimized.

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

This comment has been minimized.

Copy link
Author

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

This comment has been minimized.

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
@jonniebigodes jonniebigodes removed the stale? label Oct 17, 2019
@Mrazator

This comment has been minimized.

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.

@rikakomoe

This comment has been minimized.

Copy link
Author

@rikakomoe rikakomoe 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)

@rikakomoe

This comment has been minimized.

Copy link
Author

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

This comment has been minimized.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.