================================

<script>
/*  Simple diff highlighting */
var DiffHighlighter = {

  isDiff : function(s){
    return (s.match(/^@@.*@@/m) && s.match(/^[+-]/m));
  },
  
  highlightElement : function(el){
    var s = el.innerHTML;
    if (!this.isDiff(s)){
      return;
    }
 isDiff : function(s){
   return (s.match(/^@@.*@@/m) && s.match(/^[+-]/m));
 },

 highlightElement : function(el){
   var s = el.innerHTML;
   if (!this.isDiff(s)){
     return;
   }
    el.className += 'diff';
    s = s.replace("<", "&lt;");
    s = s.replace(/^\+.*$/mg, '<span class="diff-mark added">$&</span>');
    s = s.replace(/^\-.*$/mg, '<span class="diff-mark removed">$&</span>');
    s = s.replace(/^@@.*$/mg, '<span class="diff-mark position">$&</span>');
    s = "<pre>" + s + "</pre>"; // workaround for IE
    el.innerHTML = s;
  },
  
  highlightElementsWithTagName : function(tagName){
    var els = document.getElementsByTagName(tagName);
    for (var i=0; i < els.length; i++){
      this.highlightElement(els[i]);
    }
  }
   s = s.replace("<", "&lt;");
   s = s.replace(/^\+.*$/mg, '<span class="diff-added">$&</span>');
   s = s.replace(/^\-.*$/mg, '<span class="diff-removed">$&</span>');
   s = s.replace(/^@@.*$/mg, '<span class="diff-position">$&</span>');
   s = "<pre class='diff'>" + s + "</pre>"; // workaround for IE
   el.innerHTML = s;
 },

 highlightElementsWithTagName : function(tagName){
   var els = document.getElementsByTagName(tagName);
   for (var i=0; i < els.length; i++){
     this.highlightElement(els[i]);
   }
 }
};

DiffHighlighter.highlightElementsWithTagName('pre');
</script>

================================

And add this (or something to your taste) to your CSS:

================================

.diff-mark {
pre.diff {
  display: inline;
  color: #000;
 color: #000;
}

.diff-mark.position {
  display:-moz-inline-stack;
  display:inline-block;
  zoom:1;
  *display:block;
  width: 100%;
  font-style: italic;
  padding: 0.5em 0;
  margin: 0.5em 0;
  border-top: 1px dotted #A2B5CD;
  border-bottom: 1px dotted #A2B5CD;
  color: #A2B5CD;
pre .diff-position {
 display:-moz-inline-stack;
 display:inline-block;
 zoom:1;
 *display:block;
 width: 100%;
 font-style: italic;
 padding: 0.5em 0;
 margin: 0.5em 0;
 border-top: 1px dotted #A2B5CD;
 border-bottom: 1px dotted #A2B5CD;
 color: #A2B5CD;
}

.diff-mark.added {
  background-color: #CEFBC3;
pre .diff-added {
 background-color: #CEFBC3 !important;
}

.diff-mark.removed {
  background-color: #F5C2C1;
pre .diff-removed {
 background-color: #F5C2C1 !important;
}

================================

That's it: the script will automatically detect diffs and color them.
</verbatim>