Adding Syntax Highlighting to Your Ghost Blog

Syntax highlighting is an amazing tool for really understanding code. Not only does it make it easier to read, it also gives you a second association for the type of object it represents. For example if you read class Foo you know what this means, however if you read

class Foo  
end  

You also have an association with a colour. While there's only one class on display here, consider having multiple code blocks or classes. You can easily pick out the classes just based on colour.

class Foo  
  def self.bar()
    puts 'bar'
  end

  def foo()
    puts 'foo'
  end
end

class Bar  
  def self.bar
    calc(2)
  end

  private

  def calc(x)
    x + x
  end
end  

See what I mean, awesome isn't it!

So how do we add syntax highlighting to ghost?

It's actually surprisingly easy with Prism.js. Head over to their site and configure your custom download. I configured mine to highlight ruby, html, css, haml, scss, sass and a few others in the solaris light theme.

Once you have downloaded the files you will receive a .zip file containing a prism.js and a prism.css file.

you'll need to add those to your ghost theme folder. scp the files into your server using these commands. replace your_server_ip with your ip, and casper with your theme name.
scp path/to/prism.css root@your_server_ip:/var/www/ghost/content/themes/casper/assets/css/ & scp path/to/prism.js root@your_server_ip:/var/www/ghost/content/themes/casper/assets/js/

Now the files are available to ghost you need to tell ghost how to access them. Use your favourite editor to open up the default.hbs file.

vim /var/www/ghost/content/themes/casper/default.hbs

Look for {{! Styles'n'Scripts }}

You will see a link to one or more stylesheet beneath this marker. We can insert the prism.css file here using <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />

Then look for {{! The main JavaScript file for Casper }}

Insert the prism.js above this line, like so.. <script type="text/javascript" src="{{asset "js/prism.js"}}"></script>

Boom! Check it out, you have syntax-highlighting. Don't forget to add the language to the top of you markdown code blocks

```language-ruby
class CodeBlock  
  def is_highlighted()
    puts 'awesome'
  end
end  
 ```

Joe Woodward

Read more posts by this author.