You are currently offline, so some features of this site may not work fully.

Your browser doesn’t support some of the latest CSS features used to build this site.

Read more about my usage of new CSS features.

A snippet that removes the default GitHub stylesheets and allows you to restyle a Gist.

Previously I wrote a post about Media Queries which utilised GitHub Gists for the code samples.

I love using Gists for code samples, they look great and it’s good to get your little snippets online and sharable with others - they are automatically versioned so you can directly clone or fork them, dead easy.

However I found that on a mobile device, they aren’t really scalable and on my blog, they look pretty dreadful! Something like this:

Now you can’t really control the styles very well without hacking and overriding their CSS - it’s very specific - so I wrote a little bit of script that will remove the embedded stylesheet ready for you to restyle Gist elements however you desire.

The JavaScript

Adding styles back on

Here’s a list of CSS selectors for basic styles that you can now adapt and change - probably not an exhaustive list obviously but a start!

For now I’ve kept the basic colours and layout, but added some media queries around the Gist to display it a little nicer for mobile devices. Go on, resize the screen - I know you want to...

I think it'd be cool to style them quite extensively at some point, I imagine styling them like one of the iTerm themes I use could be pretty nice in the right context.


TL;DR

GitHub Gists are great, and here is a way to remove the default styling injected and restyle them to your heart's content!