Do you want to embed Github’s Code on your Blog or Website and want to load your code snippets much faster with a clean infrastructure of Github? Then you came at the right place.
What is Gist?
The Gist is a simple way to share snippets and pastes with others. All Gist are saved at Github repositories, so they are automatically versioned, forkable and usable.
Why Should we use Gist for Code Snippets?
The Gist is the best to use as a syntax highlighter because the snippet of code (Gist) hosted on Github and it is lightweight and not take much time to load. You can create Gist as much as you want that is free to use and it is super easy to create Gist, add, modify and delete files and code entirely in the browser. For using Gist on the website, you don’t need to install or download anything.
By hosting and code snippets to Github repository and using it on our page, We will get better page ranking because of Our Gits are indexed by Google using Github Google Juice. Also, don’t forget the simple and clean infrastructure that Github has.
How to Embed Github Code in Blog & Website
Let’s start to learn this lovely guide and host your code on Github and display it on your website. Just follow the steps.
Step 1: Create a Gist
- Log in to Github
- Click the Gist link at the top of the screen (or go to gist.github.com)
- Fill out the file name and give the extension name too. For eg: if the code is of PHP then give the extension name to file: filename.php
- Enter your code
- Click Create Public Gist
- Optional: You can also click Add File at the bottom to split your code snippet up into several different files if you need to.
Note: The Github’s syntax highlighting is auto-detected based on the extension of the file name that you enter, so be sure you add the appropriate level of detail.
Step 2: Embed your Gist
Once you create your Gist, you will be presented with a confirmation page. Click the show embed link and copy/paste the script tag onto your website.
Now, when your page is loaded, your code will be pulled in from Github and automatically formatted.
Step 3: Show RSS readers some love
This step is important if you have users that consume your site’s content outside of the site itself such as RSS readers. This will also come in handy for those who disable JavaScript, but I have still yet to meet one of those people in my decade of development experience. If you’re out there, please send me an email so I know you exist. Regardless, if you have a blog, chances are someone will benefit from this, so be sure not to leave them out.
Keep in mind that you need to properly escape your HTML special characters, or your RSS applications will think you are using an actual tag. For a working example, Right-click and hit view source to see what I did for this post.
Done!
That’s it guys. If you guys have any problem or you like it please comment below.