Adding syntax highlighting with Prism to Ghost
If you are a developer like me, you will want to probably highlight code snippets on your blog. Unfortunately, Ghost doesn't have native support for it. Lucky enough, it is not a big problem because there are many solutions that you can easily include in your template and the code will be highlighted. After small research I have decided to go with Prism because I was looking for something that supports Swift.
Installing Prism
To install it, you need to follow a few steps.
- Visit http://prismjs.com/download.html
- Pick languages and plugins that you want to have.
- Scroll down and download js and css.
- After that copy these files into your theme. In case you use default theme, it should be
content/themes/casper/assets/js
for the JavaScript file andcontent/themes/casper/assets/css
for the style sheet file. - Modify
content/themes/casper/default.hbs
by adding following tags after respective comments and once you are done, upload your Ghost installation to your server.
{{! Styles'n'Scripts }}
<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}"/>
{{!-- jQuery + Fitvids, which makes all video embeds responsive --}}
<script type="text/javascript" src="{{asset "js/prism.js"}}"></script>
Usage
For marking text as code Ghost uses triple back-ticks. After that you specify a name of language that you want syntax highlight.
```swift ```
And in middle of that you put your code that you want be highlighted.
func hello(name: String) -> String {
return "Hello, \(name)"
}
These instructions are valid for Ghost 1.5.