Add Code Syntax Highlighting to your Ghost blogging site

If you have followed my posts about setting up Ghost blogging site on Windows Azure and adding Disqus comment and changing your Ghost site theme, you probably notice that code block that comes with Ghost is very plain and has no syntax highlighting.

019-Code-Block

Don’t worry, you can easily add syntax highlighting to your ghost site. There are many ways to do that, but in this post, I will use google-code-prettify.

In this sample, I use the default casper theme, so what I need to do is to add

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

to content/themes/casper/default.hbs (NOTE: put where the main script tags are. Other themes might require you to put the script tag above in different line). As usual, I will just use Visual Studio Online to update the code.

image

However, instead of using 4 spaces of indentation to create a code block, you will need to put something that is similar to GitHub Flavored Markdown. Here are samples for C# and F# code respectively (NOTE: Highlighting also works with other popular languages like JavaScript, XML, C++, and so on).

image

And here is out post with nice code syntax highlighting for both C# and F# code.

image

Happy Blogging!

About these ads

2 thoughts on “Add Code Syntax Highlighting to your Ghost blogging site

  1. Pingback: F# Weekly #1, 2014 | Sergey Tihon's Blog

  2. Pingback: Set up Ghost blogging site on Windows Azure Websites | Cyan By Fuchsia

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s