Question

I have a problem integrating Mathjax and Jade in Express. I need to show formulas inside a ‘pre’, so I am trying to configure Mathjax through a script. This is my code:

script(type="text/x-mathjax-config")
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [['$','$'], ['\\(','\\)']],
            skipTags: ["script","noscript","style","textarea","code"]   
            }

    });

My problem is that when I try to see the page it throws this error:

SyntaxError: Unexpected token {

at Object.Function (unknown source)
at Object.exports.compile (/home/andres/web/node-login/node_modules/jade/lib/jade.js:176:8)
at Function.exports.compile (/home/andres/web/node-login/node_modules/express/lib/view.js:68:33)
at ServerResponse.res._render (/home/andres/web/node-login/node_modules/express/lib/view.js:417:18)
at ServerResponse.res.render (/home/andres/web/node-login/node_modules/express/lib/view.js:318:17)
at Promise.module.exports.app.get.Pregunta.find.exec.questions (/home/andres/web/node-login/app/server/router.js:240:16)
at Promise.addBack (/home/andres/web/node-login/node_modules/mongoose/lib/promise.js:128:8)
at Promise.EventEmitter.emit (events.js:88:17)
at Promise.emit (/home/andres/web/node-login/node_modules/mongoose/lib/promise.js:66:38)
at Promise.complete (/home/andres/web/node-login/node_modules/mongoose/lib/promise.js:77:20)

Does anyone know what might be happening?

Thank you.

Answer 1

The issue appears to be with the type='text/x-mathjax-config'. If I remove that, the view renders fine. If I leave it as it is, jade interprets the script contents as jade tags. I don’t think this is a bug in jade, since text templates should be able to be able to be written in jade as well.

In any case, it looks like mathjax requires the type in order to execute the configuration properly, so we need to work around that issue. The easiest solution is simply to keep everything as it is but add a . at the end of the script tag. This will make everything under it a text literal.

script(type="text/x-mathjax-config").
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [['$','$'], ['\\(','\\)']],
      skipTags: ["script","noscript","style","textarea","code"]
    }
  });

Alternatively, maybe you could configure mathjax after the page is loaded, as seen here. Note that I know nothing about mathjax, I just glanced at the documentation.