Github Gists are great for showing small code snippets. Either just using the site or embeding them into your site, they are a more user-friendly way of sharing code snippets. Embedding into your site can be fairly straightforward, but you might need some special considerations depending on your use case.

Creating a gist

Creating a gist is very simple. Navigate to https://gist.github.com and enter whatever code you want. If you want to include several file snippets, you just click on add file. Once you are done, make sure to change the publish option into 'Create public gist'.

Embbeding into your site

Depending on your site you can simply use the shareable code provided by github like this.

But some other situations you might required to use <iframe />. When using <iframe /> there is a change you might need to take. Instead of using the full src url provided by github, you need to remove the .js ending and replace it with .pibb.

Only showing one file

For showing only one file of your gist, there is one slight modification to the url that you need to do. You need to add the following search param ?file=<your-file-name>.

And that would be all! It is very simple and nice looking.