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.

Sign up for GitHub

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

Jump to bottom

Getting math equations to work in gatsby #599

Closed
ostrokach opened this issue Dec 9, 2016 · 4 comments
Closed

Getting math equations to work in gatsby #599

ostrokach opened this issue Dec 9, 2016 · 4 comments

Comments

@ostrokach
Copy link

ostrokach commented Dec 9, 2016 •
edited
Loading

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!
@briancappello
Copy link
Contributor

briancappello commented Dec 9, 2016 •
edited
Loading

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

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

@ostrokach
Copy link
Author

ostrokach commented Dec 10, 2016 •
edited
Loading

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

@briancappello
Copy link
Contributor

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])
    }

@ostrokach
Copy link
Author

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!

@snyk-bot snyk-bot mentioned this issue Dec 3, 2020
Open
@snyk-bot snyk-bot mentioned this issue Apr 7, 2021
Open
@snyk-bot snyk-bot mentioned this issue May 12, 2021
Open
This was referenced May 25, 2021
Open
Open
Open
This was referenced Sep 15, 2021
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@briancappello @ostrokach