Ghost  / Development
Reading Time:

Syntax coloring and line numbers in Ghost Pro

Inserting readable lines of code in a blog post used to be quite a hassle. Years ago, I remember stitching different parts of pretty-print libraries together in order to get the correct syntax coloring and line-numbers to work the way I wanted. Then I spent quite some time tweaking the CSS to make it look ok. This resulted in an abomination of scripts at the start of my page.

When I switched to Ghost Pro as my blogging platform, I decided to try a new library and ended up being impressed by the features of Prism.js. It's highly customizable and allows for many languages to be processed and supports line-numbers via a plugin.

CloudFlare

This is how I got it to work for my website.

Since I use CloudFlare, I wanted to use CloudFlare's the content delivery network (CDN) for JavaScript, on which Prism.js is available. See https://cdnjs.com/libraries/prism for a full list. If you're self-hosting your Ghost blog, you might want to check out the website of Prism.js so you can assemble the JavaScript by clicking the features you require.

For my blog, I chose the standard Okaidia theme and line numbers plugin and decided to start with C#, JSON and Python, adding more languages when I need to.

Scripts

In Ghost, open the Code Injection page in the Settings section and add the following lines in the appropriate text fields:

Blog Header:
The following lines add the CSS for the Okaidia theme and line numbers to all blog pages.

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism-okaidia.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet" />

Blog Footer:
These lines add the scripts for Prism.js, the line numbers and csharp syntax coloring the all blog pages.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/line-numbers/prism-line-numbers.min.js" ></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/components/prism-csharp.min.js" ></script>

Now that these are set, you can add syntax coloring to your blog by placing your code between the pre and code-tags like this:

<pre class="line-numbers language-csharp"><code>

    // Your code here

</code></pre>

Here are some examples for different languages. Note that for these specific examples, I added the script to the end of my blog-post instead of embedding them in the blog's footer section.

C#

public void HelloWorld()
{
   var message = "Hello World";
   Console.Writeline(message);
}

JSON

{"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}}

Python

# Python Program to find the area of triangle

a = 5
b = 6
c = 7

# calculate the semi-perimeter
s = (a + b + c) / 2

# calculate the area
area = (s*(s-a)*(s-b)*(s-c)) ** 0.5
print('The area of the triangle is %0.2f' %area)

Markup

<h1>Anatidae</h1>
<p>
The family <i>Anatidae</i> includes ducks, geese, and swans,
but <em>not</em> the closely related screamers.
</p>

I found Prism.js very easy to setup and like the way it looks on my blog pages. What still seems to be an issue, is that tags in code are not handled well. For example the '<' and '>'-characters need to be replaced with &lt; and &gt; in order to make it work, as I did for the markup-example above.
I believe this problem is not related to Prism.js however. It can probably be fixed with a little pre-processing of the page using a script but that's for another day.