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. JAMstack.org self-describes as:
Jargon aside, one of my goals while rebuilding this site was to embed GitHub gists for code snippets instead of fiddling with the
code elements directly. Just like this:
|// My first embedded gist|
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!):
After much ado, I solved these issues by adding the following CSS to override the gist's default styling:
For thoroughness' sake, here's what MDN has to say about the
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 caniuse.com 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.