A blog about trying to make yourself better at making and designing websites. Also about random shit.

Work: Syntax Highlighting

DuckDuckGo has a lot of information about programming, and that includes text snippets. When it comes to programming, syntax highlighting definitely things easier to read.

We had a few libraries that we could choose from, but we ultimately filtered them down to two: Highlight.js and Prettify because of their ability to detect languages. We need language detection because sometimes we don't have information from websites like Stack Overflow to tell otherwise.

First, I wanted to see how good the language detection was so I tried out different real-world snippets and see how they did:



Since they both fared pretty well with language detection, I decided to choose one that was smaller. That's how I chose chose Prettify (6.6kb) over Highlight.js (18.1kb).

The implementation was pretty straightforward—it's almost a drop-in solution. All that needed to change was some of the CSS since we wanted to add specificity and to change some of the colors.