Make GitHub Gists (More) Responsive

When you want to include code fragments, there are several options. You can use highlighter.js to manage all the code snippets yourself, you can use a WordPress plugin to add code or you can use GitHub.com Gists.

Personally I use the latter. It works perfectly since you can change it via GitHub and it’s on version control. In addition, I like to refer on the Gists to a blog post showing how to use a particular smippet. This adds value to both the end-user and also give some SEO-juice. ¬†There are some downsides to each method and the main problem with Gists is that it uses a table layout, which is by default not responsive on mobile phones.

There are two final results of how responsive you want the embedded Gist to be. We can make it the section a 100% width and make it horizontally scrollable so it doesn’t not affect other elements on the page. The main advantage of this approach is that you keep code indentation. You can also wrap lines wich are too long, but identation will look weird on mobile. Decide which approach you’d like, I list them both below