Feynman Liang   About

MathJax and Syntax Highlighting (with Live Preview) on Ghost

MathML Support (MathJax)

Thanks to Patrick Edelman for the reference!

Adding LaTeX to Ghost is very simple. Open up ghost/content/themes/YOUR_THEME_NAME/default.hbs. Before </body>, insert:

{{! Mathjax configuration}}
<script type="text/javascript" 	src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

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

Now test it out: $\sum \frac{1}{n} = H\_n$ should yield $\sum \frac{1}{n} = H_n$.

The configuration is not perfect, however. Action items include:

Syntax Highlighting

Did you notice that the HTML/JS code block above was syntax colored?? Fortunately, this is super easy to do.

Live Previews

Peter Schmalfeldt wrote a great post on getting syntax highlighting to work in the publisher view as well.

Mathjax Live Preview

I was able to adapt Peter’s to enable MathJax live previewing. To do so, edit ghost/core/server/views/default.hbs and before </body> add

{{! Load and configure mathjax }}
<script type="text/javascript"     src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>

{{! Re-render MathJax in live preview}}
<script>
var timeout,
    entry = document.getElementsByClassName('entry-markdown')[0];

function mathjaxify()
{
  var preview = document.getElementsByClassName('rendered-markdown')[0];
  if (typeof(typeset) == "undefined" || typeset == true) {
    MathJax.Hub.Queue(["Typeset", MathJax.Hub, preview]);  // renders mathjax if 'typeset' is true (or undefined)
    typesetStubbornMath();
  }

  // Render the bits of math that have inexplicably still failed to render, while
  // leaving the rest alone. (If you try to typeset the whole page, it will break
  // other things)
  function typesetStubbornMath() {
    $(".MathJax_Preview").each( function() {
        if($(this).text() != "") {
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, $(this).attr("id")]);
        }
        });
  }
}

// Listen for Key Presses if on Editor
if(entry) {
  jQuery(document).keypress(function(event) {
      clearTimeout(timeout);
      timeout = setTimeout(mathjaxify, 2001);
      });
}

// Check for Change of Post Selection
setTimeout(function(){
    jQuery('.content-list-content li').click(function(){ mathjaxify(); });
    }, 500);
</script>
Enjoy!