Consolas for github

I was reading my twitter feed the other day and saw this exchange come through…

Why not Consolas?

and I couldn’t agree more. So I decided to do something about it!

Getting to know Greasemonkey

I remember hearing about Greasemonkey scripts back in Firefox’s heyday. According to Wikipedia, Greasemonkey “… allows users to install scripts that make on-the-fly changes to HTML web page content …” Even better than that, Google Chrome treats the scripts as extensions right out of the box.

Of course, I have never written a Greasemonkey script so, I went to the worlds repository of these scripts, Userscripts.org. Right off the bat, Userscripts made it super easy to get my bearings; they allow you to view the source of existing scripts right in the browser.

Userscripts view source code

My next stop is over at github to figure out what CSS I need to replace.

Github’s CSS

Alright, time to use those F12 tools! I browsed over to the MonoDevelop project on github and inspected the element that contained source code.

Source code font family css

Great! Now I know the CSS selectors that I need to override. With this knowledge in hand I started my first user script.

First, I borrowed a bit of code for injecting a new style elements into the page head. I then copied the CSS for github’s pre element over to my script and added Consolas to the beginning of the font family definition. Just like that, I had the first version of my script.

Bringing it together

I created an account on Userscripts.org and navigated to script management. Uploading was as simple as pointing to my script file and filling out some metadata about the script. Time to see it in action!