992 992
993 993 ================================
994 994
995 995 <script>
996 996 /* Simple diff highlighting */
997 997 var DiffHighlighter = {
998 998
999 - isDiff : function(s){
1000 - return (s.match(/^@@.*@@/m) && s.match(/^[+-]/m));
1001 - },
1002 -
1003 - highlightElement : function(el){
1004 - var s = el.innerHTML;
1005 - if (!this.isDiff(s)){
1006 - return;
1007 - }
1008 - el.className += 'diff';
1009 - s = s.replace("<", "<");
1010 - s = s.replace(/^\+.*$/mg, '<span class="diff-mark added">$&</span>');
1011 - s = s.replace(/^\-.*$/mg, '<span class="diff-mark removed">$&</span>');
1012 - s = s.replace(/^@@.*$/mg, '<span class="diff-mark position">$&</span>');
1013 - s = "<pre>" + s + "</pre>"; // workaround for IE
1014 - el.innerHTML = s;
1015 - },
1016 -
1017 - highlightElementsWithTagName : function(tagName){
1018 - var els = document.getElementsByTagName(tagName);
1019 - for (var i=0; i < els.length; i++){
1020 - this.highlightElement(els[i]);
1021 - }
1022 - }
999 + isDiff : function(s){
1000 + return (s.match(/^@@.*@@/m) && s.match(/^[+-]/m));
1001 + },
1002 +
1003 + highlightElement : function(el){
1004 + var s = el.innerHTML;
1005 + if (!this.isDiff(s)){
1006 + return;
1007 + }
1008 + s = s.replace("<", "<");
1009 + s = s.replace(/^\+.*$/mg, '<span class="diff-added">$&</span>');
1010 + s = s.replace(/^\-.*$/mg, '<span class="diff-removed">$&</span>');
1011 + s = s.replace(/^@@.*$/mg, '<span class="diff-position">$&</span>');
1012 + s = "<pre class='diff'>" + s + "</pre>"; // workaround for IE
1013 + el.innerHTML = s;
1014 + },
1015 +
1016 + highlightElementsWithTagName : function(tagName){
1017 + var els = document.getElementsByTagName(tagName);
1018 + for (var i=0; i < els.length; i++){
1019 + this.highlightElement(els[i]);
1020 + }
1021 + }
1023 1022 };
1024 1023
1025 1024 DiffHighlighter.highlightElementsWithTagName('pre');
1026 1025 </script>
1027 1026
1028 1027 ================================
1029 1028
1030 1029 And add this (or something to your taste) to your CSS:
1031 1030
1032 1031 ================================
1033 1032
1034 -.diff-mark {
1035 - display: inline;
1036 - color: #000;
1033 +pre.diff {
1034 + color: #000;
1035 +}
1036 +
1037 +pre .diff-position {
1038 + display:-moz-inline-stack;
1039 + display:inline-block;
1040 + zoom:1;
1041 + *display:block;
1042 + width: 100%;
1043 + font-style: italic;
1044 + padding: 0.5em 0;
1045 + margin: 0.5em 0;
1046 + border-top: 1px dotted #A2B5CD;
1047 + border-bottom: 1px dotted #A2B5CD;
1048 + color: #A2B5CD;
1037 1049 }
1038 1050
1039 -.diff-mark.position {
1040 - display:-moz-inline-stack;
1041 - display:inline-block;
1042 - zoom:1;
1043 - *display:block;
1044 - width: 100%;
1045 - font-style: italic;
1046 - padding: 0.5em 0;
1047 - margin: 0.5em 0;
1048 - border-top: 1px dotted #A2B5CD;
1049 - border-bottom: 1px dotted #A2B5CD;
1050 - color: #A2B5CD;
1051 +pre .diff-added {
1052 + background-color: #CEFBC3 !important;
1051 1053 }
1052 1054
1053 -.diff-mark.added {
1054 - background-color: #CEFBC3;
1055 -}
1056 -
1057 -.diff-mark.removed {
1058 - background-color: #F5C2C1;
1055 +pre .diff-removed {
1056 + background-color: #F5C2C1 !important;
1059 1057 }
1060 1058
1061 1059 ================================
1062 1060
1063 1061 That's it: the script will automatically detect diffs and color them.
1064 1062 </verbatim>