Styling Gist embeds with CSS

Gists are short bits of code you can share and reuse. They act as lightweight repos, feature version control, and can include anything from a string to multiple files. You can also embed them on any website, which is excellent to share examples, but unfortunately, there’s no way to change the default syntax highlighting. Let’s fix that.

I recently moved all the code examples from my posts from inline <code> to Gists as it’s a lot easier to maintain them, reuse them, and keep them up to date. The default syntax highlighting style for Swift looks like this:

After a little bit of digging online, I found about Github Dark, by Stylish themes, which allows you, as you would imagine, to override github.com’s CSS with your own to produce a fancy ‘dark’ mode, including the code views for which they have some syntax highlighting themes.

I was delighted to find a version of the Atom One Dark theme, which is what I use every day. Quickly grabbed a copy of the CSS, wrapped it around a couple of namespace classes, and threw it inside my custom WordPress theme, spending about an hour (ok, maybe two) tweaking things until I got close to what I wanted.

After a little more digging, I’ve found that @lonekorean had already done all the heavy-lifting and wrote custom (more simple) CSS versions of the common themes, sharing them in his repo, from which you can grab the one you want and just drop it into your site with a couple of clicks.

I used @lonekorean’s One Dark version, with a couple of minor tweaks to the background color and gutter.

Go ahead and check the theme demos here; they’re fantastic!