[fossil-users] Diff highlighting

[Dmitry Chestnykh]

Hello,

I've made a tiny simple diff highlighting for Fossil (well, technically, for 
any HTML page) in JavaScript, and thought I'd share it with you.

Just put the following somewhere into Footer (not header!) above </body>:

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

<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;
    }
    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]);
    }
  }
};

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

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

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

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

.diff-mark {
  display: inline;
  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;
}

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

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

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

That's it: the script will automatically detect diffs and color them.

You can see it in action here:
http://codingrobots.org/p/fossil/ci/7ad9a4640a

--
Dmitry Chestnykh

_______________________________________________
fossil-users mailing list
fossil-users@lists.fossil-scm.org
http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users