Highlight.js vs SyntaxHighlighter

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:

Changelog

• 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

class Float
  def number_decimal_places
    self.to_s.length-2
  end
  def to_fraction
    higher = 10**self.number_decimal_places
    lower = self*higher
    gcden = greatest_common_divisor(higher, lower)

    return (lower/gcden).round, (higher/gcden).round
  end

private
  def greatest_common_divisor(a, b)
     while a%b != 0
       a,b = b.round,(a%b).round
     end
     return b
  end
end

Next up, I’ll work on figuring out how to add line numbers…