CSS/SASS Styling for code blocks

Will H McMahan
Designer of
Brands and Digital Experiences

For the past few years, I have used the Tech 49 Sublime Text theme as my daily driver. It also comes with a matching shell theme. This way I can have a high level of similarity between my terminal window and my text editor as I transition between them. This gave me some good inspiration for how to style the code and the pre > code elements on my personal site.

I have long ben a fan of Anonymous Pro so that was the first addition. Since I wanted to replicate the terminal window I had to make heavy use of the before and after elements of both the pre and code elements. This approach is a little hacky but it is very rare to see the use of a pre element outside of wrapping a code element. Here is what I ended up with! On this project I'm using Bourbon for some of the functions and Gulp Sass to do the compiling.