6 Syntax Highlighting JavaScript Libraries

Amazon AD Banner

There are several cases when we would want our code written in various programming languages (including UNIX commands and Makefiles) to have the same syntax highlighting that a code editor or IDE will have so the people who read your blog, web app or website will be able to distinguish the various keywords and elements of the language the code is written on. These blocks of code go inside a code (inside a pre tag) HTML block and if you want syntax highlighting, the premise is that you need a JavaScript file that parses the code using a set of rules and then applies a style to the individual components of your code's programming language using either a separate CSS file or styles defined inside the very same JavaScript library file.

I've included 6 of them, the most popular that are just JavaScript libraries, there are some more complete alternatives for Content Management Systems like Wordpress in the form of plugins. Click on the link (title) to view more details, download the files and read the instructions on how to implement them.

HighlightJS

HighlightJS

The features include 166 languages and 77 styles, automatic language detection, multi-language code highlighting, available for node.js, works with any markup, compatible with any JS framework and is pretty much one of the leaders among with PrismJS. Today this project is still well maintained, the last update was 5 days ago.

PrismJS

PrismJS

This is the library I chose for CodeTuts because I liked the styles and it covered the languages I plan on using here; the funky style is probably my favorite but if you're an avid visitor of my blog you'll note I chose a style called Okaida, here's a little demo using a nonsense JavaScript piece of code:

const pizza = (where) => `Pizza twirling through my ${where}`;

function give_something(action) {  
  action('mind');
}

console.log(give_something(pizza));  
// -> "Pizza twirling through my mind"

Rainbow

Rainbow

It has a Github repository and it's easily extendable if you know some RegExp (using the regular expression engine for JavaScript) and easy to use. Since it only weighs 2.5 Kb you can only expect 21 languages but as I mentioned earlier, it's easily extendable.

SyntaxHighlighter

SyntaxhighLighter

The name gives it all away, this one has line numbers and they provide you separate files called brushes for each of the 23 (for now) languages, you may want to read the installation and integration pages to know how to use, apart of course from the download page. Check them on Github too.

MicrolightJS

MicrolightJS

MicroLight is language agnostic, which means that it uses a well-defined set of rules that apply to most languages and the only style available is the colorless style with glow for the keywords. It weighs 2.2 Kb and was written in vanilla JavaScript.

Google Prettify

Google Prettify

An embeddable script that makes source-code snippets in HTML prettier. It was made by Google and works on the following languages (the rest are provided via extensions): a number of languages including C and friends, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefiles, and Rust.

These comments are powered by Disqus