3

Here I want to implement MathJax on my website, I coded like this in a component file:

export default ({ pathname, children }) => {
  const post = posts.find(post => post.urlPath === pathname)
  const title = post ? post.title : "(my website)"
  return (
    <div>
      <Head>
        <title>(my website) | {title}</title>
        <style>{globalStyles}</style>

      </Head>
      <div className='contentContainer'>
        <SiteTitle isHomepage={pathname === '/'} />
        <Header />
        {children}

      </div>
    </div>
  )
}

I added the following code in <Head></Head> tag:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML"></script>
<script type="text/x-mathjax-config">
        MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [["\\(","\\)"] ],
          displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
        },
        CommonHTML: { matchFontHeight: false }
        });
</script>

I need to add tex2jax config for convenience.

I tried to run it. However, it does not work

[ error ] ./components/BlogLayout.js
SyntaxError: /home/website/components/BlogLayout.js: Unexpected token, expected "}" (72:15)

  70 |         <script type="text/x-mathjax-config">
  71 |         MathJax.Hub.Config({
> 72 |         tex2jax: {
     |                ^
  73 |           inlineMath: [["\\(","\\)"] ],
  74 |           displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
75 | },
\`\`\`

How can I run it?

Keith
  • 31
  • 4

1 Answers1

0

I know this is a late answer. I am just writing the solution for the currently having issues with the same problem.

<script type="text/x-mathjax-config">
    {
      MathJax.Hub.Config({ // or window.MathJax.Hub.Config
      tex2jax: {
        inlineMath: [["\\(","\\)"] ],
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
      },
      CommonHTML: { matchFontHeight: false }
      });
    }
</script>

you are missin {} in template.

Sakata Gintoki
  • 31
  • 1
  • 6