Highlight Code Syntax using Highlight.js


Here is how you can add syntax highlighting to your Ghost blog using highlight.js:

  1. Add the highlight.js script and CSS file to your default.hbs file.

  2. Initialize highlight.js also in your default.hbs file.

  3. Restart Ghost.
  4. Now, when writing a post you can use regular markdown and highlight.js will work, but it will attempt to choose the language itself. Sometimes it can choose wrong though, so I find it best to just use actual HTML and specify using the classes which language you want. Here is an example of both:

  5. After saving go to the post and you will see that the syntax has been highlighted!
2. Initialize highlight.js also in your `default.hbs` file. 3. Restart Ghost. 4. Now, when writing a post you can use regular markdown and highlight.js will work, but it will attempt to choose the language itself. Sometimes it can choose wrong though, so I find it best to just use actual HTML and specify using the classes which language you want. Here is an example of both: ![](/content/images/2015/11/highlight-1-1.jpg) 5. After saving go to the post and you will see that the syntax has been highlighted! ![](/content/images/2015/11/highlight-2.jpg)