How to create and add GitHub gist file to your blog

GitHub Gist is very important and makes developers' life easy by sharing code. Gist is free to create and store in GitHub and they very easy to create. You can create a new gist, modify and delete the file. Lastly, there is no need to download or install a program to use gist. 

What is GitHub Gist?

- Gist is a simple way to share code snippets and pastes with others. It is used when you need to share a sample piece of code or technique with your co-workers or friends.

What is GitHub?

- GitHub, on the other hand, provides a platform to share an entire project as a repo among a team(private repo) or to the whole world(public repo).

Gists do support multi-files, but the interface is very simple. And they're limited in features, so they don't even have a file browser, nor issues, pull requests, or wiki. If you do not need to have that, gists are very nice and more discrete. Like the comments, instead of answers.

Let's see, how it can be created and used in your blog.

You can access Gist by visiting the following URL gist.github.com. Alternatively, you can access it from within your Github account (after logging in) as shown in the picture below:

Next, write a very simple code, which you want to share it with others.

In the above you have the code to share, there are many ways to share it like using Embed, Share, Clone using HTTPS, etc. But all of those will open the GitHub page to get your code. Sometimes you need to incorporate the code snippets into your blog, for that how you can do it? any idea.

Okay, let me explain, first you need to make your gist public. Here the link to the above gist -

• https://gist.github.com/lazypanda-instance/a6b1f0c4de0db4918cac96885428b570

Then select the Embed from the dropdown and copy the script tag, like below -

In the above select the Embed option and copy the script tag, as like below -

The copied script looks like as follows - <script src="https://gist.github.com/lazypanda-instance/a6b1f0c4de0db4918cac96885428b570.js"></script>

You could add this script to your blog. But I am doing something else on top of it to place the gist file inappropriate position in my blog and solved my purpose. Let me explain how I am doing it. There are few steps, that you need to follow properly. 

• Once you create your expected gist file, please add some description of gist and add the gist file name, in my case it is uniqueArray.js.
• Next, I do make the gist public.
• I used iframe to place the gist file into my blog, So the following code snippets I used in my blog.

• In above << ... >>, I used the following code in by doing URL encoding.

• Like above, update your gist file name.
• Lastly you need to do URL encoding to the entire code using encodeURIComponent() method. Or I can suggest to use the https://lazypandatech.com/apps/url-encoder to encode the URL

• Copy the entire encoded value and paste it in above code snippets like below -

You are done now, you can use this code in your html and get the gist code in your blog.

Let's have it here -

Hope you like the tricks and use the same in your blog.

Happy Coding!

- Lazy Panda