What is Gist?
Gist is an easy method to share code snippets or excerpts of data with others. Gist is owned by Github and used by millions of developers across the world.
Today, I’m exited to share this very handy code snippet which allow you to embed a Github gist on your blog, simply by pasting the gist url.
Step-1
Paste the following code into your functions.php file. Once done, simply paste the URL of a Github gist into a post or page.
The gist will be automatically embedded in your WordPress blog.
<?php
/**
*
* Example: https://gist.github.com/Crunchify/1fad3e32630de777dd0d2183ae41e80f
* Usage:
* [gist]1fad3e32630de777dd0d2183ae41e80f[/gist]
* [gist id="1fad3e32630de777dd0d2183ae41e80f" /]
*
* If a gist has multiple files you can select one
* [gist id="1fad3e32630de777dd0d2183ae41e80f" file="file-name" /]
*/
function crunchify_add_gist_github_shortcode( $atts, $content = NULL ) {
extract( shortcode_atts( array(
'id' => '',
'file' => '',
), $atts ) );
if (function_exists( 'is_amp_endpoint' ) && is_amp_endpoint()) {
return sprintf('<amp-gist data-gistid="%s" %s layout="fixed-height" height="250"></amp-gist>',
$id ? $id : trim(esc_attr($content)),
$file ? 'data-file="' . esc_attr( $file ) . '"' : ''
);
} else {
return sprintf('<script src="https://gist.github.com/%s.js%s"></script>',
$id ? $id : trim(esc_attr($content)) ,
$file ? '?file=' . esc_attr( $file ) : ''
);
}
}
add_shortcode('gist', 'crunchify_add_gist_github_shortcode');
?>
Github gists are a great way to create and share code snippets, and many developers are using Github.
Step-2
Two ways you could embed gist to WordPress blog post. Here are the best way to add Gist to WordPress using Shortcode?
Method-1:
[gist]1fad3e32630de777dd0d2183ae41e80f[/gist]
Method-2:
[gist id="1fad3e32630de777dd0d2183ae41e80f" /]
Live Example:
Let us know if you face any issue embedding Gist into your WordPress blog post.
The post How to Embed and Share Github Gists on your WordPress Blog without Plugin? appeared first on Crunchify.
0 Commentaires