Skip to content

Sexy code snippet visualisation!

6. June 2013

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: ChromeSafari 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!)
Advertisements
One Comment
  1. Hi milkator, is there an easy way to contact you about your blog? I would like to talk to you about some “interaction”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: