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:

gist

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

add-unique-array-code-gist

 

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 -

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

add-unique-array-code-gist

 

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

embed-gist-script

 

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.

<p><iframe height="530" src="data:text/html;charset=utf-8,<< Place your gist URL using URL encoding >>" style="border:none; margin-left: auto; margin-right:auto; display: block;" width="70%"></iframe></p>

 

  • In above << ... >>, I used the following code in by doing URL encoding.
<body><script src="https://gist.github.com/lazypanda-instance/a6b1f0c4de0db4918cac96885428b570.js?file=uniqueArray.js"></script></body>

 

  • 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

url-encoding-tool

 

  • Copy the entire encoded value and paste it in above code snippets like below -
<p><iframe height="530" src="data:text/html;charset=utf-8,%3Cbody%3E%3Cscript%20src%3D%22https%3A%2F%2Fgist.github.com%2Flazypanda-instance%2Fa6b1f0c4de0db4918cac96885428b570.js%3Ffile%3DuniqueArray.js%22%3E%3C%2Fscript%3E%3C%2Fbody%3E" style="border:none; margin-left: auto; margin-right:auto; display: block;" width="70%"></iframe></p>

 

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