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!

The finish line!

I went to the Consolas for github script page with Chrome and clicked the install button.

Userscripts install

Followed the prompts..

Continue installation

Add script as extension

.. and Success!

Code before and after

After some twiddling, I get the in-browser editor using Consolas as well.

Install it. Enjoy it. Remix it. Please just don’t make Comic Sans for github.

Consolas for github on Userscripts.org

Advertisements

About Joey Robichaud

Developer by day, Husband by night ;)
This entry was posted in Design, Development. Bookmark the permalink.

Thoughts?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s