Thursday 31 July 2014

How to Include Gist code snippet into Blogger

If you are writing some technical blogs, sometimes you need to give some sample code snippets. If you are planning to use your gist content(which is provided by github.com). The following simple steps you have to do get it done!.

1) Goto https://gist.github.com
2)  Login with your github.com username and password.
3) First text box is gist description. You just give meaningful name.
4) In the next text box, you have give the file name with the extension. For my case i have used extention as ".rb". So file name text box i will give like "first_ruby_program.rb". Then "Language" dropdown automatically select as "Ruby". Because of your file name having the extention of ruby.

5) Next text box, you can enter your code which you want to come your blog.
6) Click "Create Public Gist" button, for generate gist file for your content.
7) Copy the script from "Embed URL". If you are planning to use your gist content in blogger.

Thats it from Gist side. Following steps have to do in blogger side.

1) Create/edit existing post. Paste the code where you copied from gist "Embed URL" text box. Here is the screenshot for how to get the "Embed URL" from gist.
embed url from gist









2) Check "Interpret typed HTML Line breaks" option is checked on. For this settings you have to see "Post settings" in right side bar and then click "Options". You can see the option. Below is the screenshot i attached for easy navigation purpose.

blogger settings
















3) Save your changes, before publish better you can see the preview. Here is the screen shot how finally gist code snippet will appear in your blog.


Gist sample snapshot















Now you can see neatly formatted and highlighted code snippets from gist. Hope you can feel this is useful tips. Thanks for reading!!!