Adding syntax highlight to Ghost
Have you ever stopped and thought about something we (developers) take for granted, like syntax highlighting? We rely so much on it that I believe everyone will consider it a mandatory feature on any kind of text editor or IDE we might think about picking up.
I’ve read my share of articles pro and against it, but coming from a background in Computer Engineering, where I had to write code for several written tests using just pen & paper, I’m thankful for every little bit of help I can get.
Thus, enters syntax highlighting. While building this blog theme, one of the personal requirements I set up for it was proper code support. However, I did not want to build it myself, as I believe it would take longer than estimated and would end up demotivating me from ever finishing the Ghost theme.
Luckily, you can always count with the web to provide you with great tools for virtually anything, allowing you to start building on the shoulders of giants. In this case, I have Lea Verou and her Prism.js project to thank for.
As you can see on the basic usage example provided in the project page, using this tool to provide syntax highlighting to your website is as simple as including the JavaScript and the CSS files on your page, and you’re good to go!
However, there is a bit of wisdom I can add to all of this. To get the right syntax highlighting, you must provide the code language beforehand. You can read more about it on the basic usage description, but the snippets provided are in HTML, and if you’re using Ghost as your blogging platform (like myself), you are probably writing these articles using Markdown, not HTML. How do you provide the code language then?
Well, the same way you do it on GitHub, for example. Just wrap your code with ``` and add the language of your choice right after it, like the following:
```javascript
// code
```
You can check all the languages it supports here, and the best thing is that you can cherry-pick just the languanges you want to include on your page.