8 Javascript Syntax Highlighters for Client Side Code Highlighting.

One of the things needed in Minelienda Tumblr Theme, from my tumblr days, was the ability to highlight syntax. The easiest way to achieve this was using a JavaScript Syntax Highlighter¹, for client side code-highlighting.

I didn’t want to use a jQuery plugin. Because I needed something small, that would load fast and did not show the flash of un-styled lines of code, or kept the flash, to a minimum.

Here’s a list of 8 JavaScript Syntax Highlighters, that were considered before finally using one of them.

This is a list, and not a review. A review may be coming up in an another post.

8 JavaScript Syntax Highlighters

• highlight.js: Minified, the JavaScript syntax highligter is about 37kb on the desk. This includes almost, all of the popular programing and scripting languages, along with some conf files.
• google-code-prettify: Google code prettify is good. This JavaScript syntax highlighter was my second backup choice, incase things didn’t worked out with prism.js and/or SyntaxHighlighter (see below). On disk, it’s about 17kb. Support for most languages is right out of the box. Other languages are supported via extensions, which may increase the load times and add to the pre-load flash of un-styled content. Most of the time, you don’t need to specify which language you’re highlighting.
• prism.js: A widely popular JavaScript syntax highlighter. It’s used by Smashing Magazine², CSS-Tricks³, A List Apart⁴, etc. Need I say more? It’s super fast, especially if the browser, it’s loaded on, supports Web Workers⁵. The core is about 1.6kb on disk. Every extra language adds about 0.3-0.5kb each. The css for a theme is about 1kb. Like I said, small and fast! This is what’s used in Minelienda Tumblr Theme, to highlight code/syntax.
• SyntaxHighlighter: Another, well know JavaScript library for highlighting syntax. This one’s used by Apache⁶, Yahoo⁷, Mozilla⁸, WordPress⁹, etc. Created in 2004 and still maintained by Alex Gorbatchev¹⁰. You may want to use this one, if you want to highlight code on your blog on blogger.com¹¹. It’s got a bloggerMode, which enables you to use it with Blogger.com. Some features include, graceful fallback, showing up the code in RSS as regular pre tags, etc. Approximately 15kb for the default CSS theme and style. 16kb for the core and the autoloader. Each additional language file is about ~2kb on avergage. This would’ve have been my first backup, if things didn’t work out with prism.js (see above).
• Rainbow: Small, lightweight library for syntax highlighting. Minified the core is about 1.4kb. Each additional language adds about 1-3kb.
• SHJS: Old, I think the last version was out in 2008. The good thing about that is browser compatibility. Not my cup of tea though. Is still used by some JavaScript libs mentioned here.
• Snippet: A jQuery¹² plugin. I didn’t want to use a jQuery doesn’t mean you won’t either. Built on top of SHJS (See above). Boasts 39 unique color themes. Minified, the plugin is ~67kb and the css is about ~50kb. Precisely the reason, I wouldn’t want to use a jQuery plugin.
• sunlight: “Intelligent syntax highlighting”, so states the tag line. Haven’t tried it yet. On disk, the minified core is ~6kb. Core plus the languages is ~76kb, minified. Provides a way to extend it’s functionality.

Bonus

Don’t want to use a client-side syntax highlighter?

Consider using an online tool that generates the CSS and HTML for you, on the spot. You can then, copy paste this over to the post/page you want to highlight your code in.

Here are two such online syntax highlighting tools.

1. tohtml.com: A simple, reliable HTML/CSS generator. Just copy paste the code over into the text area. Then select the type of language from a multi-select. Select the style you want, and hit the Highlight button. Instant HTML/CSS for your code. Copy paste it back to your HTML file and it’s done!

2. SyntaxHighlight.in: Although, this one claims to be an online syntax highlighting tool, it does use JavaScript for Highlighting syntax and you would have to include a JavaScript file and a css file, in your head section. The JavaScript file uses jQuery. But the good thing about it is, that the plugin is ~1kb on disk. The css file ~3kb. Once included, you don’t need to include it again for later usage.

Bonus 2

Completely unfair comparison of Javascript syntax highlighters - An excellent, if old, post that compares some JavaScript Syntax Highlighters. Although published in 2011, it should give you an approximate and a fair comparison between some JavaScript Syntax Highlighter¹ libs mentioned above.