gatsbyjs and mathjax 3
ChauhanT opened this issue · 6 comments
Hi,
I'm trying to figure out how to use mathjax 3 with gatsbyjs and cannot find any resources. I have not found any 'examples' which do so either. I ask because I'm more of a programming-hobbyist trying to set up a mathematics-heavy blog and cannot understand how and where to configure mathjax 3 within gatsby, how to couple mathjax 3 with the remark plugin etc.
Any help/tip in how to go about doing this will be awesome!
A quick Google search for "gatsbyjs MathJax" suggests that there are two different plugins for MathJax in gatsbyjs, gatsby-remark-mathjax and gatsby-remark-mathjax-ssr, and there is a tutorial for the first one of them.
I don't know anything about gatsbyjs, and don't know the difference between the two, but these look like promising starting points.
This repository is for examples of using MathJax as a server-side command-line tool. It does not contain examples of use within any specific framework (as there are literally hundreds of them, and we can't maintain plugins for everything). There is a repository for web-based demos that might be a better place to see how MathJax could be used in your pages, but it looks like gatsbyjs is based on the reactjs library, and makes things more complicated. There are a number of MathJax plugins for React, so perhaps one of those might help if the gatsbyjs ones don't help.
Hi,
Thanks for the quick response. I used the gatsby-remark-mathjax-ssr plugin until recently, but after updating to gatsby v3, it has stopped working. Since it used mathjax 2, and I have read that mathjax 3 is almost 50% faster, I was trying to find ways to integrate mathjax 3 with my website instead of relying on plugins.
I am interested in a server-side implementation as it is noticeably faster. I saw server-side in the repo and decided to ask my question here. I'll also have a look at the web-based demons - thanks for pointing that out. Will they also have server-side rendering examples?
Cheers
Will they also have server-side rendering examples?
No, the server-side examples are here, and the browser-based examples are there.
Good luck!
Hi David,
I have "almost" got this working - except the \ref blocks which do not render properly. I had faced this issue when revamping the mathjax-node ssr plugin for gatsby (sadly, the author seems to have completely abandoned it), and you had given me some very helpful advice about using the state to keep track of the nodes. I can not figure out how to do this with mathjax 3, even after going through all the examples. I'm using remark-math to extract individual nodes from the page and then remark-mathjax to typeset them. Any tips on how to go about this. I can prepare a minimal working example if you'd like.
If I get this working, I would like to share it with the community as a gatsby plugin which I'm willing to maintain to the best of my abilities. I'm happy to move this to some other forum if you think this is not the appropriate place for this discussion.
Cheers!
@smalltimer, sorry for the delay in getting to your question.
Can you supply the code that you currently have? It is hard to give you advice without knowing where you currently stand, and which output format you are using (SVG or CHTML).
MathJax v3 keeps its own list of the math that it has identified, so it may be possible for you to populate that list with your own math items, so then you should be able to treat your collection of math as a page and call MathJax.typesetPromise() rather than MathJax.tex2chtml() or whichever converter you are currently using. That will be more efficient and will also handle the references properly using MathJax's usual internals for that.
This could be done by using mathjax.document() to to create a MathDocument for MathJax to work with, configuring its renderActions to replace the default find and update actions with your own. Your replacement find would call the two visit() commands to get the math nodes, and would create MathItem objects to store them in the document's math list. You would need to save the Gatsby node in the MathItem (probably in the start and end property in place of the HTML node), and would transfer the node's value to the MathItem.math property. Save the display/in-line status in the MathItem.display property. The replacement update function would take the MathItem.typesetRoot and set the node's value to typesetRoot.outerHTML.
If you need to clear the math list, or the TeX labels, there are calls on the MathDocument for that. SO if you go to a new page that should have its own labels and tags, you would want to do that reset.
That's the basic outline, but there are some details to be worked out.
@dpvc Thanks for such a fantastic explanation. I will try the mathjax.document() approach you have suggested here. Due to lots of work, it might be a few weeks before I can go deep into this though. For now, I'm making do without the \ref tags and the maths is typeset beautifully regardless.
In case you'd like to have a look - my script is extremely simple, and shared here. As you will see, to leverage the remark-math ecosystem, the conversion is done in a very roundabout manner - converting the remark nodes to rehype first. If you think there's a way to improve this, I'll be happy to give it a go too.
Thanks a lot!