Gatsby: Getting math equations to work in gatsby

Created on 9 Dec 2016 · 4Comments · Source: gatsbyjs/gatsby

Is it possible to get math equations to work "dynamically" in Gatsby?

I have followed the README instructions on Extending Markdown Syntax with Plugins, and created the following index.js file in the loaders/markdown-loader folder of my gatsby-starter-documentation site.

var frontMatter = require('front-matter')
var markdownIt = require('markdown-it')
var hljs = require('highlight.js')
var objectAssign = require('object-assign')

var highlight = function (str, lang) {
  if ((lang !== null) && hljs.getLanguage(lang)) {
    try {
      return hljs.highlight(lang, str).value
    } catch (_error) {
      console.error(_error)
    }
  }
  try {
    return hljs.highlightAuto(str).value
  } catch (_error) {
    console.error(_error)
  }
  return ''
}

var md = markdownIt({
  html: true,
  linkify: true,
  typographer: true,
  highlight,
})
  .use(require('markdown-it-mathjax')())
  .use(require('markdown-it-sub'))
  .use(require('markdown-it-footnote'))
  .use(require('markdown-it-deflist'))
  .use(require('markdown-it-abbr'))
  .use(require('markdown-it-attrs'))
  .use(require('markdown-it-anchor'))
  .use(require('markdown-it-table-of-contents'), {
    includeLevel: [2,3,4]
  });
module.exports = function (content) {
  this.cacheable()
  const meta = frontMatter(content)
  const body = md.render(meta.body)
  const result = objectAssign({}, meta.attributes, {
    body,
  })
  this.value = result
  return `module.exports = ${JSON.stringify(result)}`
}

I also added the following lines to my html.js, in order to load mathjax:

[...]
return (
<html lang="en">
  <head>
  [...]
  <script type="text/javascript" async
    src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
  </script>
  </head>
  [...]

When I run gatsby develop, the math equations get rendered fine when I refresh the page, but then they become text again as soon as I make some changes and the page "updates".

Any ideas on how I could get math equations to get rendered dynamically like the rest of markdown?

Thanks for the great project, and sorry if this is a stupid question!

Source

ostrokach

Most helpful comment

Hmm yes, I see. How about with both componentDidMount and componentDidUpdate?

    componentDidMount() {
        MathJax.Hub.Queue(['Typeset', MathJax.Hub])
    }
    componentDidUpdate() {
        MathJax.Hub.Queue(['Typeset', MathJax.Hub])
    }

briancappello on 10 Dec 2016

👍3

All 4 comments

Can you try implementing componentDidUpdate in your-project/wrappers/md.js?

module.exports = React.createClass({
    render () {
        // ...
    },
    componentDidUpdate() {
        MathJax.Hub.Queue(['Typeset', MathJax.Hub])
    },
})

briancappello on 9 Dec 2016

👍1

@briancappello Yup, after implementing componentDidUpdate, the MathJax equations get updated whenever I change the corresponding markdown file.

However, I noticed another problem. The MathJax equations are not typeset when I go to a different page and then come back to he original page. For example, if I have equations on the index page of a simple documentation site, the equations get typeset when I enter the site, but they are not typeset if I go to the documentation page and then back to the index page.

For example, see here: http://ostrokach.gitlab.io/gatsby-docs-site/

ostrokach on 10 Dec 2016

Hmm yes, I see. How about with both componentDidMount and componentDidUpdate?

    componentDidMount() {
        MathJax.Hub.Queue(['Typeset', MathJax.Hub])
    }
    componentDidUpdate() {
        MathJax.Hub.Queue(['Typeset', MathJax.Hub])
    }

briancappello on 10 Dec 2016

👍3

Yup, everything seems to be working well now!

I do get a ReferenceError: MathJax is not defined JavaScript error when I deploy the website (but not when I run it locally using gatsby develop). However, it does not look like it affects anything, and it's probably unrelated to this issue.

Thank you very much for your help!

ostrokach on 10 Dec 2016

Was this page helpful?

0 / 5 - 0 ratings