GitHub gists in Gatsby

November 29, 2018

I'm a big fan of GatsbyJS. In fact, this site and many other sites I've built recently have been with this fantastic JAMstack: Gatsby, Contentful and Netlify. JAMstack is a new-ish movement for how to approach web development. self-describes as:

Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

Jargon aside, one of my goals while rebuilding this site was to embed GitHub gists for code snippets instead of fiddling with the pre and code elements directly. Just like this:

// My first embedded gist
alert('Hello world!')
view raw helloWorld.js hosted with ❤ by GitHub

Luckily, we can leverage the gatsby-remark-embed-gist plugin to do exactly that.

Following the documentation was straightforward, but with two major gotchas (hence the reason for this post!):

  • The embed syntax formatting defaults to tabs with 8 spaces
  • The code font sizes become uncomfortably large on mobile browsers

After much ado, I solved these issues by adding the following CSS to override the gist's default styling:

table {
text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
tab-size: 2;
view raw textSizeAdjust.css hosted with ❤ by GitHub

For thoroughness' sake, here's what MDN has to say about the text-size-adjust property:

The text-size-adjust CSS property controls the text inflation algorithm used on some smartphones and tablets. Other browsers will ignore this property.

If you're reading this some time in the future, be sure to check out the data on cross-browser coverage for text-size-adjust, it's not implemented in all modern browsers at the time of writing but will likely change in the future.

Thanks for reading ❤️

If you're jazzed about this post, feel free to tweet this article 🐦

If I missed something, please do drop me a message and I'll fix it 🔨

Otherwise, read more articles! ✍️