/ Development

Syntax Hilighting on Ghost with PrismJS

If you have not noticed, I run ghost as my blogging engine. Partially because it's fun, and partially because I like to fiddle around with new technology.
I don't have too many posts on my blog right now, but I do tend to write quite a bit of code, and one thing I loved about my old blog on Wordpress was the syntax highlighting I had setup with my theme.

Today I fooled around a bit with Ghost and a beautiful library by Lea Verou, Golmote and a bunch of other fantastic developers called PRISM.

Firstly, open up the link above in a new window (or this one if you are too lazy to move your mouse up), you are going to need it.

On Prism.js

Click on the big unmissable download button on the top right hand corner, and you will be led to the "configure and download" section of the site.
Here you can choose which theme, languages and plugins you want to use. I would suggest you take it easy and download only the ones you really need.
If you are using Casper as a base for your theme, chances are your code blocks are dark - with that in mind, I'd go for the Twilight theme (the same one I use on this blog).
So you've chosen your theme, languages and plugins and you have downloaded the JS and CSS file to your computer.

Upload your assets

Now you have to upload your assets to your ghost site. I have my theme on a git repository and it syncs with my server, so I will walk you through where you would upload your files.
In your theme folder, under assets, you have built, css and js folders. You are going to place your prism.css file in your css folder and your prism.js file in your js folder.

Make Ghost see your files

There are many ways of doing this, you could add it to your default.hbs or if you are just looking for a quick fix, add it to your settings in Ghost, under Code Injection.
ghost-settings-code-injection

Here you can add you stylesheet to the header and your javascript to the footer of your site:

Addding your stylsheet:

<link rel="stylesheet" type="text/css" href="/assets/css/prism.css" />

and your Script:

<script type="text/javascript" src="/assets/js/prism.js"></script>

Now let's add code

You probably already have some code block on your ghost site, if you don't, here is the 5 sentence tutorial.
Get code
Paste Code
Select Code
Type Ctrl-Alt-C / Command-Alt-C

Your editor should have something like this:

sample-code-no-prism
Which should look like this on your site:

/**
 * This is an example comment
 */
alert('Hello World - without prism')

And now add some PRISM magic

If you follow the site, prism tells you to add language-XXXX where XXXX is replaced with your language of choice. For my example, my language is Javascript, which would end up like language-javascript. In Ghost, all we have to do is add the language name after we open our code-block:

sample-code-with-prism
Which in turn, looks like this:

/**
 * This is a new example commnet
 */
alert('Hello World through a new prism')

Plugins

I only use the Line Numbers plugin which can easily be added to your code block just by adding another class call (make sure you downloaded the plugin inside your JS and CSS files). Our final code would look like this:
sample-code-with-prism-and-lines

/**
 * This is a new example commnet
 */
alert('Hello World through a new prism')

Wrap-up

This method does not influence the behavior during editing your post, it will only be visible in your front end. I will fool around with some ideas over the next few weeks, and if I have some time and bright ideas, I'll write a new post on how one might go about it.

Gregory Brown

Gregory Brown

Baker, cake designer, cook and just by chance, a full featured developer that is passionate about technology.

Read More