Replace the Rouge highlighter with Prism.js in Jekyll

By default Jekyll 3, ships with Rouge syntax highlighter. But for some reasons you may want to replace it with Prism.js syntax highlighter. Prism.js is a very lightweight JavaScript library to provide code highlighting on websites. In this article I will show you how to set up it on Jekyll-based website.

Let’s begin

Replace process of the Rouge highlighter with Prism.js in Jekyll is a really easy process. Now, step by step guide.

First, we need to disable the Rouge syntax highlighter that is Jekyll’s default (bult-in in version 3) syntax highlighter. To do this, read another my post here.

The Prism.js syntax highlighter consists of two parts, a JavaScript file and a CSS file with color scheme for it. These files can be download from the project website. There, a configuration tool lets you choose the languages you want included, then gives you a prism.js and prism.css files with only those languages included.

Move both downloaded files to the appropriate directories that placed in the root of your Jekyll website. The prism.js file to js catalog and the prism.css file to css catalog.

Include the prism.css in the head.html file, just above the ending </head> tag:

<link rel="stylesheet" href="{{ "/css/prism.css" | prepend: site.baseurl }}">

Include the prism.js in the footer.html file, just above the ending </footer> tag:

<script src="{{ "/js/prism.js" | prepend: site.baseurl }}"></script>

The last part is actually using the Prism.js syntax highlighter within one of your posts. Say you are writing a new post (using markdown) with code. Just wrap the code with a triple backticks:

```
Some code.
```

You can also pass in a language to provide language specific highlighting:

```javascript
Some code.
```

Congratulations! Now you have Prism.js syntax highlighting.

If this article has helped you then please leave a comment

Thanks for reading!