Sexy code snippet visualisation!

In a previous post we have seen how easy it is to manage code snippets using GitHub-Gist and Sublime Text 2.

As I promised I will show now, how to quickly visualise you code snippets, with bl.ocks.org.

Actually, you do not have to make anything! Just go to  bl.ocks.org and add you GitHub username to the URL! For me it…it is that URL: http://bl.ocks.org/milkbread

As you can see…this site accesses your Gist-directory and lists all public Gists.

The basic usage of bl.ocks.org is the html-preview of your projects/snippets/tests/whatever.

Basic information:

• name of main html-file: index.html
• iframe size: 960px*500px
• does not need head-body structure
• uploadable file size seems to be limited (I was not able to use a 11mb file)
• possibility to add additional files:
  • readme.md –> describe you project/…/whatever
  • thumbnail.png (230 * 120 px)–> preview on the main page

Upload the thumbnail.png:

Basically, the sexy Gist-framework can be applied without any constraints. But sadly…it is not possible to upload the ‘thumbnail.png’ via Sublime Text 2!

I found a good tutorial which describes the upload via Git-command line tool: http://www.d3noob.org/2012/12/loading-thumbnail-into-gist-for.html

I will conclude the necessary points here:

1. clone the desired Gist, e.g.: 

   git clone https://gist.github.com/5713066.git

   (The corresponging URL can be found on the left side of the Gist-page)

2. enter the new folder:

   cd 5713066

3. copy the thumbnail to that folder:

   mv /home/image/folder/thumbnail.png thumbnail.png

4. add the thumbnail to the Git-repo:

   git add thumbnail.png

5. commit it to the repo:

   git commit -m "Added thumbnail.png"

6. finally…push it to the repo:

   git push

7. enter Git-username & -password
8. have a look at you bl.ocks-overview:

   http://bl.ocks.org/your-username

Finally…

…there are some browser-plug-ins that enable you to directly access you bl.ocks from GitHub-Gist: Chrome, Safari or Firefox (provided by Mike Bostock)

• Firefox: download addOn –> Firefox –> goto addOns –> settings –> install from file
• Chromium: dowload addOn –> Chromium –> open extensions window –> pull file in there (!Worked not from ‘Downloads’-folder…I’ve loaded it from the desktop!)