Integrate Google Code Prettify (highlight) in Ghost

Modifications for posts

To integrate Google Code Prettify, you need to do the following:

  • open ghost/content/themes/YOUR_THEME_NAME/default.hbs
  • Before </body>, insert the following:
<script src=""></script>
  • when Writing a new Post, specify your code language with the following markdown:
    ```prettyprint lang-python
    def main():
    "Finally... technical writing is as easy as %s" %
    ' '.join(map(lambda x: str(x), range(1,4))))
  • Here is what is looks like:
def main():
    "Finally... technical writing is as easy as %s" % 
        ' '.join(map(lambda x: str(x), range(1,4))))

Modifications for MarkDown (Live View on edit)

  • Edit your ghost/core/server/views/default.hbs and add the following before </body>:
	{{! Load and configure mathjax }}<br>
	<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);