How to add code sample in your Blog

When I started blogging about code examples or sample projects the issue that I use to face was adding the code to my blog. I use to directly copy and paste code in the blog making my blog appear Clumsy.

Behold! Gist is here

Gist is by GitHub for sharing the code and its the best thing that I have seen so far. You can integrate you gist post in the blog and your blog looks clean

Here is an example of how my code looks when I copy and paste directly to the blog

 /* loading spinner */
    .loading {
        position: fixed;
        z-index: 999;
        height: 2em;
        width: 2em;
        overflow: show;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }



    /* :not(:required) hides these rules from IE9 and below */
    .loading:not(:required) {
        /* hide "loading..." text */
        font: 0/0 a;
        color: transparent;
        text-shadow: none;
        background-color: transparent;
        border: 0;
    }

Its clumsy and not appealing

Here is how it looks when I integrate Gist

STEPS

1. Go to GIST
2. Paste your code there 
3. Its important to give the file extension 
4. Click on Create public gist button
5. Copy the script src located on the top 
6. Add it to your blog (in the HTML code)
7. Boom your code in your blog looks neat and clean