Adding syntax highlighting to Ghost

I wanted to enhance the syntax highlighting in the default Ghost theme (Casper). I dug around and while there are a ton of solutions out there, I settled on Prism because it's simple and lightweight. Notice the colorful goodness:

// here is some JavaScript
var x = new joButton("Hello World!");  

Prism is easy to install in your default ghost theme (I'm using Casper). Don't let the length of this tutorial fool you; it took me about five minutes total to get up and running.

Installing Prism

  1. Go to http://prismjs.com/download.html

  2. Select a few options; basically, which theme you want and what languages you want to support

  3. Scroll down to the bottom and download your custom-made prism.js and prism.css files; put them someplace you can find

  4. Copy these files to your server, and login there

  5. Copy prism.js into your ghost/content/themes/casper/assets/js folder

  6. Copy prism.css into your ghost/content/themes/casper/assets/css folder

  7. Edit your ghost/default.hbs file.

Add a link tag to your new CSS near the top of the file:

    {{! Styles'n'Scripts }}
    <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic|Open+Sans:700,400" />
    <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />

and a script tag to your new JS near the bottom of the file:

    {{! The main JavaScript file for Casper }}
    <script type="text/javascript" src="{{asset "js/index.js"}}"></script>
    <script type="text/javascript" src="{{asset "js/prism.js"}}"></script>

Using Prism

Edit a blog in Ghost, and add a section which looks like this:

 ```language-markup
 <h1>Hello World!</h1>
 ```

Which, when you view in your blog (not ghost's preview) should look something like this:

<h1>Hello World!</h1>  

I couldn't find a list of all the language strings Prism includes by default, but here are the ones I use:

  • language-markup for HTML/XML
  • language-javascript for JavaScript and JSON
  • language-css for CSS

That's it!

Some notes:

  • In your Markdown code blocks, be sure to use the language-blahblah bit at the top, as above. Without this, Prism will not engage, and you'll have your defualt code block styling. Also note that if you use an unsupported language identifier, Prism just makes it look kind of ugly (depends on your theme I guess).

  • This should work with other Ghost themes, but be aware that some of them already have other syntax highlighting schemes which you may have to strip out (or just use instead if you like them).

Endorse davebalmer on Coderwall submit to reddit
comments powered by Disqus