MathJax and Syntax Highlighting on Ghost

2 min read

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=""></script>

<script type="text/x-mathjax-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:

  • Overridding Markdown parsing for $...$ enclosed text. In particular, $\sum_{n=1}^\infty \frac{1}{n} = H_n$ fails to render properly because _..._ is used by Markdown for italics. edit: Thanks to Filip Allberg for helping me figure this out, you need to escape your underscores. $\sum_{n=1}^\infty \frac{1}{n} = H_n$ renders fine if the subscripts are escaped (\_ instead of _) like in $\sum\_{n=1}^\infty \frac{1}{n} = H\_n$
  • Math embedding in live preview. I suspect this is not too difficult. edit: I've posted directions on how to do this below.

Syntax Highlighting

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

  • Open ghost/content/themes/YOUR_THEME_NAME/default.hbs.
  • Before </body>, insert:
<script src=""></script>
  • Specify highlighting and prettyprinting classes using MarkDown:

      ```prettyprint lang-python
      def main():
          "Finally... technical writing is as easy as %s" %
            ' '.join(map(lambda x: str(x), range(1,4))))

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=""></script>
<script type="text/x-mathjax-config">
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}

{{! Re-render MathJax in live preview}}
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)

  // 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) {
      timeout = setTimeout(mathjaxify, 2001);

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