Prism JS and Highlight JS - great Javascript plugins for code highlighting

Okay let me define in start, this one is not a one on one fight. This post is all about their features of these two top code highlighting Javascript plugins. While redesigning, I decided to put code highlighting in my blog, well I was worried about size of plugin. Once I went through it, found it pretty light plugin to highlight the code, unless used for some required languages. Lets dive into their features.

If you haven't still convinced with highlight plugins, then believe me I'll let you down with all these features listed below, to choose anyone of them for your site.

Highlight JS Prism JS

Light Weight

If you are worried of having load on your template, then let me clear this first. Highlight JS and Prism JS both uses regex, a Javascript feature to detect combination of string. This is complex to code but extremely helpful for these kind of purpose. Both of them are uses regex techniques to highlight code.

For basic use, when I selected Javascript, CSS and Markup / HTML as a language for highlighting with default style then the total fle size of script that is CSS and Javascript was 12.5 KB in Highlight JS and 10.11 KB in Prism JS. Well, minified version obviously. However, adding other languages hardly adds 1 KB to file.

Usage

Usage of both of them is easy as pie. Highlight JS requires code initialization where Prism JS works even after adding JS and CSS file in your script. Highlight JS provides functionality of highlighting other tags rather than pre or code tags which are standards to put code in. While Prism JS works only on standard codes, which are pre and code tag.

Prism JS requires you to add class to every code tag of language like language-xxx, for its plugin to work as well as to maintain the W3 standards. Well, it also helps Prism's one of the plugin known as Show Language, that shows language label above all codes.

Diversity of Languages

Prism JS supports, around 70 languages while Highlight JS supports 125 languages. Well, its a big break through, so every language you want and is not present in any of them is not possible. Today beside HTML, CSS and Javascript there are several more languages popular among developers which are: PHP, SQL, Python, Ruby, Java, Objective-C, C++ and several more. All of them are present in their language support.

Even more, they are still accepting your request on their Github repositories for more languages. So if you think that there is something left, request them and you will be responded.

Plugins in Prism JS

Prism JS got plugins supported with their highlight plugin. These plugin includes Show Language, Line number, Line Highlight and 5 more. Highlight JS do not have such kind of plugins. However, if you think that you do not need these plugins and Highlight JS can work better for you, you can choose Highlight JS for yourself.

These plugins adds plus points to your code, make sure that you add only those plugins which are required otherwise file size becomes heavier and heavier. 

Customization to a better level

There are no W3 standards of code coloring, so its user choice to color the code as per needs. Prism got 6 different styles while Highlight JS got big variety of 63 styles. Obviously anyone style sheet would be added at a time. No doubt Prism got less style but each of them are unique and I'm sure anyone would be perfect for you.

Highlight JS got 63 styles out of which Github is my favorite, got light background and soft light colors to highlight attributes. Beside Github there are many to choose with, check out and let see which one is your favorite and hit me in comments.

If you think that there is nothing that match your standards in style, then they got simple class names so you can just go their API page (Highlight JS and Prism JS), check out class names and add your style for every bit of your code.