Colorediffs bookmarklet
As I’m sure almost nobody know yet, I am a developer of pretty Thunderbird extension called Colorediffs. It does a good job for couple of people coloring those boring plain text diffs every good developer receiving constantly. It’s part of our job to review them, we couldn’t do anything with this. Except maybe use some good tool to make life a little bit easier.
Anyway as a developer of this extension I get numerous of request from people to add some additional features in it but the most surprising was to make it work in a browser. I was almost shocked, do people really use browsers for reading code? If they do why the provider of a code couldn’t make it look pretty? It isn’t that hard, I mean the simplest and welcomed by a lot of people solution is just color the changed lines and it could be done with a simple regexp. Really simple.
But it turns out, yes, people look at plain text in their browser. Still. And then I thought, could I help them? Making extension work in a browser isn’t a good idea still, it’s heavy, slow and doesn’t care if there’s other content on the page except code. It just wasn’t made for that. In the world where it lives, whole letter is under it’s power and it uses it to make diffs looking good and actually make sense for a reader.
But web pages is just a whole different story. Even though as it turns out people use browsers for reading plain pages of code they usually looking at other pretty stuff and make an extension understand that is a hard task. Even harder one is to find couple of lines of code on the page with other stuff and make it any good.
On the other hand, I though, do I have to do this with extension and it’s full blown diff files parser? Could I just color some lines in <pre> blocks and call the work done? That’s still better than black-on-white stuff. So I thought a little more and created a Bookmarklet. Just drag-and-drop it to your bookmarks panel and click when you’re viewing some site with a code, and your code will have some colors. Enjoy!
Full code is below, you could do everything you want with it but if you would convert it or improve it somehow I would appreciate if you send me a link to a project.
var s=document.createElement('script'); s.setAttribute('src', 'http://jquery.com/src/jquery-latest.js'); document.body.appendChild(s); s.onload=function(){ jQuery.noConflict(); jQuery("pre").each(function(i, el) { jQuery(el).html( jQuery(el).html() .replace(/^(@@\s-[\d,]+\s\+[\d,]+\s@@)\s/mg, "$1\n") .replace(/^(@@\s-[\d,]+\s\+[\d,]+\s@@)$/mg, "<span style='color:blue'>$1</span>") .replace(/^(\+)$/mg, "<span style='color:green'>$1</span>") .replace(/^(\+{3} [^+].*)$/mg, "<span style='color:green'>$1</span>") .replace(/^(\+[^+].*)$/mg, "<span style='color:green'>$1</span>") .replace(/^(\-)$/mg, "<span style='color:red'>$1</span>") .replace(/^(\-{3} [^-].*)$/mg, "<span style='color:red'>$1</span>") .replace(/^(\-[^-].*)$/mg, "<span style='color:red'>$1</span>") ); }); }; void(s);