In this post I want to compare two syntax highlighters: Highlight.js and Syntax Highlighter. For whatever reason I cannot understand at the moment, even though I already had Highlight.js in my blog I decided to try out Syntax Highlighter, which is another nice looking code highlighter.
Maybe it was because I wanted to change things after I stumbled across the builtin syntax highlighting in Octopress or another great application of the Solarized syntax highlighter at Thanpol.as. Perhaps it was because it was late at night and I didn’t realize I could change from the default highlight.js theme to its Solarized theme.
Nonetheless, I switched from HighlightJS to SyntaxHighlighter briefly but decided to switch back because:
- 7/12/15: I’m using Rouge now, so this page is out of date
- 2/1/14: I’ve changed syntax highlighters, so see this version, which uses Highlight.js
- 8/17/13: I figured out the line numbers.
Syntax Highlighter requires more imports
You need to import lots of different brushes for different languages. Highlight.js only has 2 imports and you can even use a CDN like Yandex so it’s really only a couple lines to start using it.
Syntax Highlighter is noticeably slower
For whatever reason, despite my best efforts, Syntax Highlighter always seems to take a moment after loading the page before it applies styling, which means that a user will briefly see the unhighlighted code. I noticed this both in official examples as well as other sites.
Highlight.js, however, worked out of the box and I didn’t notice anything similar.
Highlight.js’ Solarized theme is brilliant
Next up, I’ll work on figuring out how to add line numbers…