I’m glad they did this, but there were quite a few popular WordPress plugins that were already using the [ gist ] shortcode, which may cause a conflict and cause your code snippets to not be working.
For me, the gists didn’t display at all. There weren’t any stray brackets laying around because the shortcode was detected, just not being used correctly.
So, if you have Jetpack active on a site (with Shortcode Embeds active), deactivate and delete whatever gist shortcode plugin you were using and learn the Jetpack version (also works on WordPress.com):
5 Ways to Embed Gists with Jetpack v2.9 and later
1) oEmbed (no shortcode)
Example:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Make sure it’s on its own line, and if it’s the last line of a post/page, you’ll need to add another line or wrap it in a shortcode.
2) Wrap the full URL in a shortcode
Example:
Notice the space after the link and before the closing bracket.
It’s safer than relying on WordPress oEmbed to detect it because it’ll work even if you don’t put it on its own line or if you have it as the very last line in your post/page.
3) Shortcode with just the ID
Example:
Most plugins used something like [ gist id=”1234567″ ] but the id=”” part isn’t needed/allowed in Jetpack’s shortcode.
4 & 5) How to display a single file from a Gist
Example 1:
Example 2:
I prefer Example 1 (which is what I used in this post for all these gist demos), but you can use whichever method you prefer.
At Least 5 Ways to Embed Gists in WordPress
As of January 25, 2014, Jetpack incorporated the Gist Shortcode from WordPress.com. The new [ gist ] shortcode works as of Jetpack v2.9 (released January 26, 2014).
I’m glad they did this, but there were quite a few popular WordPress plugins that were already using the [ gist ] shortcode, which may cause a conflict and cause your code snippets to not be working.
For me, the gists didn’t display at all. There weren’t any stray brackets laying around because the shortcode was detected, just not being used correctly.
So, if you have Jetpack active on a site (with Shortcode Embeds active), deactivate and delete whatever gist shortcode plugin you were using and learn the Jetpack version (also works on WordPress.com):
5 Ways to Embed Gists with Jetpack v2.9 and later
1) oEmbed (no shortcode)
Example:
Make sure it’s on its own line, and if it’s the last line of a post/page, you’ll need to add another line or wrap it in a shortcode.
2) Wrap the full URL in a shortcode
Example:
Notice the space after the link and before the closing bracket.
It’s safer than relying on WordPress oEmbed to detect it because it’ll work even if you don’t put it on its own line or if you have it as the very last line in your post/page.
3) Shortcode with just the ID
Example:
Most plugins used something like [ gist id=”1234567″ ] but the id=”” part isn’t needed/allowed in Jetpack’s shortcode.
4 & 5) How to display a single file from a Gist
Example 1:
Example 2:
I prefer Example 1 (which is what I used in this post for all these gist demos), but you can use whichever method you prefer.
They all work in Jetpack v2.9 and later.
One reply to “At Least 5 Ways to Embed Gists in WordPress”
Pingback: oEmbed Gist into WordPress - WordPress Teacher Zac Gordon
Comments are closed.