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.
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.
- 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:
- 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)
- enter the new folder:
- copy the thumbnail to that folder:
mv /home/image/folder/thumbnail.png thumbnail.png
- add the thumbnail to the Git-repo:
git add thumbnail.png
- commit it to the repo:
git commit -m "Added thumbnail.png"
- finally…push it to the repo:
- enter Git-username & -password
- have a look at you bl.ocks-overview:
- 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!)