Five Steps to Highlight Code Syntax in Ghost

Just as Easily Done as Said

One of the reasons I decided to use Ghost was because I wanted the ability to easily embed code in my posts. While it is nice to use R Markdown and R Notebooks directly out of RStudio, I didn’t like the idea of managing all of my posts through individual html files.

I’m sure there are some fancy ways to tie everything together and use proper publishing techniques, integrate sharing and RSS feeds, etc. However, this is 1000x easier and makes much more sense for those who want to spend their time on content rather than web development.

The default theme in Ghost is casper. Please understand, I’m brand new to the game, but I was able to understand the extremely simple file structure and very legible code laid out in the JavaScript and CSS files.

If you want to add a code block, simply type:

```language-python
# Python
import pandas as pd
df = pd.DataFrame()
```

The code will come out looking like:

# Python
import pandas as pd  
df = pd.DataFrame()  

It’s a very simple process to style your syntax to look like this:

# Python
import pandas as pd  
df = pd.DataFrame()  

Follow these 5 steps:

  1. Download your current casper theme
    • In your Ghost admin interface go to settings > general > themes and click “Download” next to your casper theme
  2. Find the file and unzip the contents into a folder. You’ll need to edit a few files from this in a minute, so keep track of where it is.
  3. You can use a few different JavaScript libraries to do the markup, however, I think Prism works well.
    • Go to http://prismjs.com/download.html and select the languages you’d like to have highlighted.
    • Scroll to the bottom and download the two files: prism.js and prism.css
  4. Take your new files and load them into the proper directories in the casper library (we’ll call this folder casper for this example)
    • prism.js should be loaded into casper > assets > js
    • prism.css should be loaded into casper > assets > css
  5. You need to make two small modifications to your default.hbs file (this is located in the main casper directory).
    • You’ll make a reference to the new prism.css file
    • You’ll make a reference to the new prism.js file

In the header you’ll need to tell the page to load the new prism.css file by inserting the following code directly after the other “css/screen.css” line.

<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />  

When done it should look like:

<link rel="stylesheet" type="text/css" href="{{asset "css/highlight/styles/railscasts.css"}}">  
<script type="text/javascript" src="{{asset "css/highlight/highlight.pack.js"}}"></script>  
<link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />  
<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />  

In the header you’ll need to tell the page to load the new prism.js file by inserting the following code directly after the other “js/index.js” line.

<script type="text/javascript" src="{{asset "js/prism.js"}}"></script>  

When done it should look like:

You’ll do a similar thing with the prism.js file you downloaded. Insert the following toward after the “js/index.js” line (located near the bottom of the page):

<script type="text/javascript" src="{{asset "js/index.js"}}"></script>  
<script type="text/javascript" src="{{asset "js/prism.js"}}"></script>  

That’s it, you’re done!
Anytime you create a new code block, simply add “language-theSyntaxYouWant” and you’ll be set to go!

For example, here’s a look at the code for R syntax.

```language-r
# R
library(ggplot2)
p = ggplot(data,aes(x=date,y=sessions)) 
p + geom_line()
```

After your prism.js and prism.css installation you’ll see:

#R
summary(cars)  
myFunction = function(variable){  
  return(variable)
  }

Or try using language-SQL

#SQL
SELECT * FROM factTable  
INNER JOIN dimTable  
  ON factTable.dimTable_id = dimTable.id

Have fun!