Add MathJax

[noamross]

I attempted to add MathJax to the header here: https://github.com/noamross/gams-in-r-course/commit/5f9dfcde271ddcdc095c81d2ac9732afa128d9fa, and in the rendered site it does appear in the <script> tag in the header, but MathJax, like $\lambda$ in Chapter 1.7 (https://noamross.github.io/gams-in-r-course/chapter1), does not render.

[chadfawcett]

Hey @noamross, I was linked to this issue by @stefaniebutland! I believe the reason why your MathJax isn't rendering is because the MathJax script has loaded before your chapter content has loaded.

When you load the Chapter 1 page an empty skeleton page is first loaded which includes the MathJax code, the skeleton page does not contain any MathJax syntax so nothing is rendered. After the skeleton HTML has loaded the Chapter 1 content is injected into the HTML, but the MathJax script doesn't know about this. The solution is to tell MathJax to re-render whenever your page changes. There are several ways of doing this, some better than others. I can make a pull request or provide some examples, but in order to optimize performance it would help to know all the places you want to be able to use the MathJax syntax. Is it only in Chapters, or are they all over the website?

One other thing I noticed is that the MathJax config you are loading is looking for \( and \) as the beginning and end of the MathJax format, rather than $.

[chadfawcett]

Judging by your tweet it looks like you already had the right idea with the dynamic loading... I'll leave this with you incase you wanted to try this yourself, but I was able to get things working by placing the following in the src/templates/chapter.js component.

//  Render MathJax syntax
useEffect(() => {
  window.MathJax && window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub])
})

Inspired by this issue comment https://github.com/hanai/gatsby-remark-mathjax/issues/1#issuecomment-443436362

[stefaniebutland]

Noam, @chadfawcett is my friend and A+ colleague in co-working in Kamloops. I told him of your goodness.

[noamross]

Thanks so much, @chadfawcett and @stefaniebutland! Where exactly does the little script go in chapter.js? I am not getting this right. I tried putting it on the top level, but get an error that "useEffect() was not defined". I tried injecting it in the return layout with a <script dangerouslySetInnerHTML ...> element, and nothing updated. Any change you can PR this in 🙏 😬?

[chadfawcett]

@noamross I’m on the road at the moment so I can’t make a PR until later. That code will go inside your template component just before the return.

https://github.com/noamross/gams-in-r-course/blob/c5f3c2ccd904be2037412d55537f9730d3012e4f/src/templates/chapter.js#L24

useEffect needs to be imported from react import React, { useState, useEffect } from ‘react’

https://github.com/noamross/gams-in-r-course/blob/c5f3c2ccd904be2037412d55537f9730d3012e4f/src/templates/chapter.js#L1

If you can wait until tonight or tomorrow I can make a PR, but as it stands this solution is fairly and has poor performance. If you list all the different areas your site uses MathJax I can try to come up with a more elegant solution.

[noamross]

Perfect, that does it. Thank you!