/ Ghost Tips

Highlighting code blocks in Ghost blog

If you are using Ghost blog and want to highlight your code block in your blog post, I'm going to show you a simplest way to do it ;).

So, there are many JavaScript libraries help us to do it but Prism is a good choice.

Prism (http://prismjs.com/)

Setup

Step 1: Add Prism CSS to your blog header

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/themes/prism.min.css" />

This link is default theme of Prism, they have several themes(dark, okaidia...) and you can find them in cdnjs.

Access your Ghost admin, navigate to Code injection, add the line above to your Blog Header.

That link current version is 1.14.0, but you can check the latest version at the time you read this post.

Step 2: Add Prism JS to your blog footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/prism.min.js"></script>

Access your Ghost admin, navigate to Code injection, add the line above to your Blog Footer.

That's all for setting up!

How to use

As you may know, we use ``` to start writing code. Now we need to add a specific language for the code block. Below is an example with JavaScript code block.

```javascript
let show = () => console.log('Hello');
show();
```

You will see:

let show = () => console.log('Hello');
show();

Beside javascript, we can use it with css, html and so on...

Happy blogging :)