/ ghost

How to add Prism Syntax Highlighting to your Ghost blog

I have been using Ghost pro for a few years now as my blogging platform and I love it. However, its lack of code formatting (syntax highlighting) has made it difficult to use the default theme (Casper) to display source code. I love the Casper theme, so I decided to work out how to add the Prism syntax highlighting engine to my blog (without creating a custom theme).

To do this, simply log into your control panel for Ghost and click on the Code Injection menu option. Then, simply paste the following HTML in the Footer section:

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/themes/prism.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/plugins/line-numbers/prism-line-numbers.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/themes/prism-coy.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/components/prism-csharp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/components/prism-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/components/prism-c.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/components/prism-clike.min.js"></script>
<!-- Add additional languages here -->

You can find additional plugins and languages listed on the Prism CDN. You can also find alternative themes to use. I am using the "Coy" theme for the code on my blog.

Once you've added a link to the Prism.js JavaScript files, adding code is as easy as using the specific code markup.

```csharp
public string SomeProperty { get; set; }
```

This will display as

public string SomeProperty { get; set; }

You can also add line numbers to your code by doing this:

<pre class="line-numbers"><code class="lang-csharp">public void AddTwoIntegers(int param1, int param2)
{
  var result = param1 + param2;
  Console.WriteLine($"{param1} + {param2} = {result}");
}</code></pre>   

The result will look like this:

public void AddTwoIntegers(int param1, int param2)
{
  var result = param1 + param2;
  Console.WriteLine($"{param1} + {param2} = {result}");
}
Michael Earls

Michael Earls

Michael has been a computer nerd since he was ten years old and he begged his parents to buy him a computer for Christmas. In 1982, he was the proud owner of a TI-99/4A. He's been coding since.

Read More
How to add Prism Syntax Highlighting to your Ghost blog
Share this

Subscribe to cerkit