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.
In this blog, I am going to share my experience of implementing syntax highlighting using
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
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.
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
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/js/prism.min.js. Then, added the required lines to load these files
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.
Congratulations! Now you have Prism.js based syntax highlighting.