In-browser JavaScript formatting and coloring

Maybe this has been done before, but since I implemented it before realizing someone else might already have done this, I don’t care.

I read a lot of code in forums/blogs, especially JavaScript code. Sometimes it’s well formatted, sometimes not. And rarely the code is colored. So I created a quick and dirty bookmarklet combining compressed code from http://jsbeautifier.org/ along with coloring support from SHJS. To them I just added a few lines of basic code that grabs pre-tags and reformats them.

Download the code and then create a new bookmark where you paste the code as location. The page containing the code has to use HTML pre-tags surrounding the code, which usually is the case.

To test, either:
1. Paste the code in FireBug and press Run

or

2. Bookmark the code and try it out on the forum post that triggered it all heheh

NOTE: ONLY WORKS WITH JAVASCRIPT, it will pretty much freak out if it finds HTML or any other markup language in the mix as well. Also, I’ve only tested this in FF3 so other browser may or may not work.

Before

After