Syntax Highlighting on Ghost

If you a programmer or you write anything about code such as PHP, Bash, and other programming or computer language I think you want to easy read the code in your blog post. So, most Content Management System like WordPress is available plugin for it (ex: WP-Syntax). Ghost is still growing up and for now not available plugin for it. But, you can do some hack. How? Here we go.

1. Open this file:

content/themes/<theme_name>/default.hbs  

and add this code:

https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js  

2. Admin Panel Integration

Open this core/server/views/default.hbs and add this coe after

Ghost.init();  
< !-- Google Code Prettify -- >  
  
    var timeout, entry = document.getElementsByClassName('entry-markdown')[0];

    function prettify() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = 'https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js';
        document.body.appendChild(script);
    }

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

    // Check for Change of Post Selection
    setTimeout(function(){
        jQuery('.content-list-content li').click(function(){ prettify(); });
    }, 500);
  
https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js  
< !-- Google Code Prettify -- >  

Finnaly

When you are creating or editing a new post you can use GitHub markdown to use the new styling like this:

  ```language-php
  echo "Hello Ghost !!!"
  ```

That's all. So easy huh? Happy blogging with the code ๐Ÿ™‚