20 20 </ul>
21 21 </li>
22 22 <li><a href="#ticket-checkin-links">Link tickets to checkins</a></li>
23 23 <li><a href="#th1-usage">Fossil and Th1</a></li>
24 24 <li><a href="#versionCompressed">Versioning compressed files</a></li>
25 25 <li><a href="#ColorPicker">Color selector in check-in properties</a></li>
26 26 <li><a href="#SearchWiki">Searching wiki text</a></li>
27 + <li><a href="#HighlightDiff">Highlight diff's</a></li>
27 28 </ul>
28 29
29 30 <h2><a name="CGI">Using <cite>Fossil</cite>'s Built-In CGI</a></h2>
30 31 <h3>Motivation</h3>
31 32 * You want to share a repository through your existing web infrastructure.
32 33 * You want to share more than one repository at the same time.
33 34
................................................................................
973 974 # found the search-term, so print where and what was found:
974 975 echo "$p"
975 976 echo "$foundtext"
976 977 echo "----"
977 978 fi
978 979 done
979 980 </verbatim>
981 +
982 +<a name="HighlightDiff">
983 +<h2>Highlight diff's</h2>
984 +<h3>Problem</h3>
985 +Fossil shows a diff of a checkin. It uses the textual representation ('+' sign for added line, '-' for a changed/deleted line). Having a color for added lines, e.g. green, and for changed lines, e.g. red, would make the changes more visible.
986 +
987 +<h3>Solution</h3>
988 +The soultion was presented on tzhe mailing list (20-Jan-2011).
989 +
990 +<verbatim>
991 +Just put the following somewhere into Footer (not header!) above </body>:
992 +
993 +================================
994 +
995 +<script>
996 +/* Simple diff highlighting */
997 +var DiffHighlighter = {
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 + }
1023 +};
1024 +
1025 +DiffHighlighter.highlightElementsWithTagName('pre');
1026 +</script>
1027 +
1028 +================================
1029 +
1030 +And add this (or something to your taste) to your CSS:
1031 +
1032 +================================
1033 +
1034 +.diff-mark {
1035 + display: inline;
1036 + color: #000;
1037 +}
1038 +
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 +}
1052 +
1053 +.diff-mark.added {
1054 + background-color: #CEFBC3;
1055 +}
1056 +
1057 +.diff-mark.removed {
1058 + background-color: #F5C2C1;
1059 +}
1060 +
1061 +================================
1062 +
1063 +That's it: the script will automatically detect diffs and color them.
1064 +</verbatim>