I’ve been tinkering around with a million and one different things lately. One of my latest ones is an online code explorer. I have been producing a lot of code and every once in a while I need a quick way to display it, as a package. There are plenty of plugins out there like SyntaxHighlighter, Prettify, and GeSHi that will format the code with colors and spacing… but what about when I want to display an entire folder structure?

We were having one of our weekly coder meetings and I brought up the subject: “Does anyone know of a good plugin where you can just display a folder full of code?” At first there was a little confusion by trying to explain what I meant, but shortly after everyone agreed that they didn’t know of one. That meant it was time to make one… and so I did.

The plugin allows for different themes, multiple instances, fullscreen mode, github connections, and much more. This following demo is hooked up to our public BigSpaceship/js repository.

Launch Code Viewer

This is the first version of what could be done. At first, it was only meant to allow traversing through a local directory of code, but a few questions were raised as to… “Well, what if we could hook it up to GitHub?” So… with a little bit of research and some code alterations, it now also hooks up remotely into GitHub via public APIs.

There are still some outstanding security concerns and browser testing that needs to be resolved, but its pretty close to being ready. When it is, expect another blog post explaining all the great features.