A while ago, we started using Gists for code snippets in this site, and this has been a great way to share code and give back to Open Source.
However, since implementing AMP, this has not always played nicely when viewing pages on a mobile, via AMP.
That is now fixed! Any Gist you see in this site will now show up just fine when you visit the AMP version, too. Win.
Table of Contents
How we did this
As with everything WordPress and Open Source, we looked for a solution which had already been made. Props here go to Eddy Barraud and Takayuki Miyauchi, who released this excellent plugin oEmbed Gist Plus for WordPress, which (along with a little manipulation on our part) allowed us to update every Gist in the site to be AMP friendly in 1 fell swoop (see the explanation below for how to do this).
Install and use oEmbed Gist Plus on WordPress
First up, you install and activate the oEmbed Gist Plus plugin from the official WordPress repository.
This alone won’t make your Gists work, though. You will need to change from using the script tags to either pasting in the URL directly, or, as we did, to using the shortcode format.
How to update all your gists
After checking that this worked in a post – and worked in the AMP version (see any post URL with `/AMP/` appended at the end in this site to see the AMP mobile version), we used a find and replace (you can do this through WordPress using Better Search and Replace plugin by Delicious Brains) to find the start and end of our Gists (everything follows the same format here, so this worked to update 100+ posts in about 5 minutes) and replace with the new shortcoded format.
The exact mechanism for this will vary for your site.
Be very careful with this, backup your database before running, and be aware, particularly the latter, may well affect any other JS you happen to have in your WP posts. We only use Gists in this site, but use a “Dry Run” beforehand and see if this figure tallies with the number of posts containing gists, to be sure. Also, run this first in staging, and check this is working first.