thumb 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.



Step 1. 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.


Step 2. 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.


Step 3. 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.


Step 4. 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 }}">


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

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


Step 6. 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.


Arthur Gareginyan

Arthur Gareginyan

Arthur is a designer and full stack software engineer. He is the founder of MyCyberUniverse.com. His personal website can be found at arthurgareginyan.com. Check out his free WordPress plugins at wordpress.org.

Follow Arthur: