#027: Code Syntax Highlighting, Part 1

(Updated on )

As far back as I can remember, I used Google Code Prettify to apply the syntax highlighting on code block on CSS-Tricks. You know, where in a line like <div>test</div>, the <div> part is a different color than the test part. This is very helpful for code readability. It also helps readers instantly understand what they are looking at is a code block (people like to scan articles, don’t you know).

In this new design, we decide to go with the freshly released Prism.js instead. It’s quite a bit lighter weight and faster. It’s also tailored to work just with HTML, CSS, and JavaScript, which is 95% of the code on CSS-Tricks. I also quite like how the class names used for coloring are rationally named.

We start to figure out how exactly to use it. First of all, we tell CodeKit to concatenate this library into our global JavaScript file (which is empty so far, but we’ll be writing code there later). We link up the compressed JavaScript file in our included footer part.

It takes us a minute to understand that there isn’t anything you “call”, it just kinda works assuming you have the correct class names in place. We finish up by playing around with the CSS a little bit and making the code look more like it always has on CSS-Tricks.