MathJax with Ghost

      It took me quite a while digging around the Ghost's source code just to find a workaround solution for adding MathJax. And it turned out to be one of those problems that some smart people had already solved kindly and shared the solution online. In this post, I modified the code that Feynman nicely did, and compiled the information that I came across for the past few hours.

To add MathJax, there are two things to modify: first is the rendering for the blog theme, and second is the rendering for the ghost editor.

For the blog theme:

Inside the default template file, [Ghost directory]/content/themes/[current_theme]/default.hbs>, add the following code to reference the source code.

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

For Ghost editor:

Find the default template file, [Ghost directory]/core/server/views/default.hbs, do the same to reference the source code again and add the following code right after Ghost.init().

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]);
        typesetStubbornMath();
    }
    function typesetStubbornMath() {
        $(".MathJax_Preview").each( function() {
            if($(this).text() != "") {
            MathJax.Hub.Queue(["Typeset", MathJax.Hub, $(this).attr("id")]);
            }
        });
    }
}
if(entry) {
    $('.entry-markdown-content').keypress(function(event) {                                    clearTimeout(timeout);
        timeout = setTimeout(mathjaxify, 500);
    });
}

setTimeout(function(){
    $('.content-preview js-content-preview').ready(function(){mathjaxify(); });
},500);
setTimeout(function(){
    $('.entry-markdown-content').ready(function(){mathjaxify(); });
},500);
setTimeout(function(){  
    $('.content-list-content li').click(function(){ mathjaxify(); });
},500);

I added two extra setTimeout functions to render MathJax when the page is loaded, and the rest is the same as what Feynman has. The code does the job, but for some reason my enter and delete keys don't register as keyboard event, and that bugs me a little. I rarely work with javascript, so if there is a better approach, do let me know.

Tips at using MathJax with Ghost

As discussed in this thread, Showdown, which is used by Ghost, does not work well with rendering both LaTex, and MarkDown syntaxes at the same time. A short equation can be rendered perfectly, but for a long equation it is helpful to nest the LaTex expression inside a <p> or <div> tag.

Official MathJax examples

Stackoverflow MathJax basic tutorial and quick reference

Quick MathJax expression checking tool

comments powered by Disqus