Tuesday, May 19, 2015

How to embed Gist source code into Blogger?

I hope you all know about "Gist" If you don't know the definition already, here you go...

"Gist is a simple way of sharing source code snippets or samples with others" - Taken from definition.

Today we are going to see how easy to embed Gist code with our blogs. You would have faced such a pain, when you write some technical article with lots of source code references(Could be any language :() Formatting the source code will take much longer time, than your whole content of an article.

Here I am going to explain, how easy it is to embed the external source code into our blog posting without much effort. Looks simple...

Yes it is. Here you go...

<div class="gistLoad" data-id="GIST_ID" id="gist-GIST_ID"></div>
<script src="https://gist.github.com/zarub2k/GIST_ID.js"></script>
<script src='https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js' type='text/javascript'></script>

GIST_ID: This is the actual Gist id which can be taken after you create any Gist. This has to be replaced with the original id.

The actual Gist source code is being referred by the second line. This line has to be replaced with the original Gist source link.

Finally this is how the source code will be rendered in your blog post. Enjoy sharing lot of source codes :)

Share the post and give your feedback and comments if any...

No comments:

Post a Comment