Syntax Highlighting on Ghost using Prism.js

Want to add code syntax with highlighting to your Ghost blog? Try out Prism.js

Install

First, download prism.css and prism.js from http://prismjs.com/download.html. Next, move the files into your ghost installation according to the two steps below. Replace casper in the file path with the theme directory you are using if it is different:

  • Move prism.css to ghost/content/themes/casper/assets/css/prism.css
  • Move prism.js to ghost/content/themes/casper/assets/js/prism.js

Now that the files are in place, we just need to tell Ghost to use them.

Edit ghost/content/themes/casper/default.hbs and make two entries. First, add a tag in the to activate the stylesheet:

{{! Styles'n'Scripts }}
...
<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />  
...

Second, insert a <script> tag for prism.js before the closing </body> tag:

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

Last, restart your Ghost server. Note that syntax highlighting won't show up in the preview pane while you edit a post, but it will in the published page.

Using Syntax Highlighting in the Editor

In order to use syntax highlighting, we use GitHub Flavored Markdown (GFM) (3 triple back ticks/grave accents) ``` with a descriptor included at the beginning of the block.

This is accoplished by beginning a code block with the 3 triple back ticks in succession ``` followed by a description of the syntax highlighting we want to use, alone on a single line (aka language-markup, language-javascript, language-css, etc.).

We close the code block with 3 triple back ticks in succession ``` alone on a single line:

 ```language-markup
 <html>
 <head>
   <title>Hello World</title>
 </head>

 <body>
   <p>Hello World</p>
 </body>
 </html>
 ```

The above produces the following for language-markup:

<html>  
<head>  
  <title>Hello World</title>
</head>

<body>  
  <p>Hello World</p>
</body>  
</html>  

Pretty simple, right?

Limitations

There are a few corner cases that Prism.js can't handle... If you have more questions on limitations of Prism.js, check out their list of ongoing known issues.


Examples

Here are just a few examples of the many languages Prism.js supports.

CSS
body {  
    background-color: #d0e4fe;
}

h1 {  
    color: orange;
    text-align: center;
}

p {  
    font-family: "Times New Roman";
    font-size: 20px;
}
JavaScript
function myJSCallback() {  
  alert(this.message);
};

var receiver = { message: 'hi there!' };  
var callback = funcPtrType(myJSCallback, receiver);  
C
#include <stdio.h>
int main()  
{
    printf( "I am alive!  Beware.\n" );
    getchar();
    return 0;
}
C++
#include <iostream>

using namespace std;

int main()  
{
  cout<<"HEY, you, I'm alive! Oh, and Hello World!\n";
  cin.get();
}
Java
public class HelloWorld {

    public static void main(String[] args) {
        System.out.println("Hello, World");
    }

}
Python
x = 1  
if x == 1:  
    # indented four spaces
    print "x is 1."
PHP
<?php  
    echo "Hello World" . "\n";
?>
SQL
SQL> SELECT ID, NAME, SALARY  
FROM CUSTOMERS  
WHERE SALARY > 2000;  
Bash
#!/bin/bash
HELLO=Hello  
function hello {  
    local HELLO=World
    echo $HELLO
}
echo $HELLO  
hello  
echo $HELLO