6 Syntax Highlighting JavaScript Libraries

Published in 25-09-2016 by Luis Lopez

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.

It’s the one I’m currently running (Hexo, the static site genrator uses it), it has several styles but for some reason the theme I’m using chose the worst (similar to the original Github style) and two nice features: you can add a file title and the link to that file if you want. Example:

my-file.clj
1
2
3
4
5
6
7
8
9
10
11
12
(ns project.core
(:require [clojure.string :refer [split capitalize]]))
;; This is a nice comment, with a type signature
;; the-truth :: String -> Eff Console nil
(defn the-truth [lang]
(-> (str lang " is amazing!")
(split #" ")
(#(map capitalize %))
(#(doseq [word %] (println word)))))
(the-truth "Clojure")

PrismJS

PrismJS

This is the library I chose for my old version of CodeTuts (when I was using Ghost); 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.

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.


Comments: