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="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
  • when Writing a new Post, specify your code language with the following markdown:
    ```prettyprint lang-python
    def main():
    print(
    "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():
print(
    "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="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>
Integrate Google Code Prettify (highlight) in Ghost
Share this

Subscribe to robsCode