Doesn't render equation about gatsby-remark-mathjax

[mreishus]

I got it to work. Here's my solution.

In template file.

1. Add script tag to helmet

        <Helmet
          htmlAttributes={{ lang: 'en' }}
          meta={[{ name: 'description', content: siteDescription }]}
          title={`${post.frontmatter.title} | ${siteTitle}`}
        >
          <script
            type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
            async
          />
        </Helmet>

2. Create hacky on script load function. I grabbed this from an issue on the react helmet page.

function waitForGlobal(name, timeout = 300) {
  return new Promise((resolve, reject) => {
    let waited = 0

    function wait(interval) {
      setTimeout(() => {
        waited += interval
        // some logic to check if script is loaded
        // usually it something global in window object
        if (window[name] !== undefined) {
          return resolve()
        }
        if (waited >= timeout * 1000) {
          return reject({ message: 'Timeout' })
        }
        wait(interval * 2)
      }, interval)
    }

    wait(30)
  })
}

3. Add to componentDidMount of the template.

  componentDidMount() {
    waitForGlobal('MathJax').then(() => {
      top.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'],
          },
        },
      })
    })
    if (top.MathJax != null) {
      top.MathJax.Hub.Queue(['Typeset', top.MathJax.Hub])
    }
  }

4. Add to componentDidUpdate of the template

  componentDidUpdate() {
    if (top.MathJax != null) {
      top.MathJax.Hub.Queue(['Typeset', top.MathJax.Hub])
    }
  }

[martintasker]

Thanks. Unfortunately that didn't work for me (I put it into my site layout page).

I wondered, did you consider trying mathjax-node, to do server-side rendering, which could be integrated into the plug-in?

[martintasker]

Hi I have had the same problem. Could you give some suggestions about good ways to "include Mathjax in your template"? I guess I could work it out by a long read of mathjax.org, but if you have anything ready to hand it would save time :-). Thanks!

[hanai]

This is the desired result. This plugin is used for keeping mathjax equations as raw after markdown transform.

[hanai]

https://www.mathjax.org/#gettingstarted

add this to html:

<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script>

[mreishus]

I can't get it to work either. After adding the gatsby-remark-mathjax plugin to the options:{plugins:[... section of my gatsby-transformer-remark entry in gatsby-config, and adding the MathJax script tag in my template file:

          <Helmet
            htmlAttributes={{ lang: 'en' }}
            meta={[{ name: 'description', content: siteDescription }]}
            title={`${post.frontmatter.title} | ${siteTitle}`}
         >
           <script
             type="text/javascript"
             src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
           />
         </Helmet>

I have no luck with $a^2 + b^2 = c^2$ in an md file.

I have a jekyll site that uses MathJax. I had to insert this in its html files:

<script type="text/x-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"] }
    }
  });
</script>

However, I can't figure out how to do that in gatsby. Could this be what I'm missing or is there an easier way?