Syntax Highlighting with Prism in Jekyll

Syntax Highlighting with Prism in Jekyll


Code readability has become one of the important topic in the programming world in the past few years. People have started to realize its importance from the perspective of overall software development. A readable code is much easier to understand and easily adoptable by any developer. It gives a easy path for newcomer to dive into the development.
Syntax highlighting is the feature of displaying certain text specially source code in different colors and fonts to ‘stand out’ from the rest of the code. It is “must have” feature for text editor.

Read more about Syntax highlighting.

In this blog, I am going to share my experience of implementing syntax highlighting using Prism in Jekyll. Prism is a JavaScript based lightweight, extensible syntax highlighter and built with modern web standards in mind. Apart from the core features of supporting many different languages, pure CSS based syntax highlighting, wide browser support, I really liked the plugins it provides to enhance the syntax highlighting ability. Out of many, I liked the plugins like Command Line, Copy to Clipboard Button, Download Button and Diff Highlight. I feel, these will really going to help my readers to easily read the code snippet and test at their end.

What I achieved using Syntax Highlighting

First of all, let’s see how adding syntax highlighting totally changed the look and feel of the code snippets in my blog.

Image: Syntax Highlight with no CSS

Image: Syntax Highlight with Prism

I hope you found the second one more readable than the first one.

See it in action in the blog Intro to splat operator in Ruby.

The first one is my old syntax highlighting with Jekyll’s default highlighter Rouge which lacks the proper highlighting theme.

Read Syntax Highlighting in Jekyll with Rouge in order to use the Jekyll’s default highlighter.

How to use Prism

Step 1: Add the required CSS and JS files

Get the required CSS and JS files from the Prism’s website and place it into your assets folder. Choose the required plugins as per your choice.

I added into assets/css/prism.css and assets/js/prism.min.js. Then, added the required lines to load these files

<link rel="stylesheet" href="/assets/css/prism.css">

and 

<script type="text/javascript" src="/assets/js/prism.min.js"></script>
Step 2: Using the Prism.js syntax highlighter in post

Just wrap the code with triple backticks or pass the language to use language specific syntax highlighting.


```javascript
Some code.
```

Congratulations! Now you have Prism.js based syntax highlighting.

Freelancer BRG

Thank you for reading the post. Click here to Go Back.

Share