20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
+
|
</ul>
</li>
<li><a href="#ticket-checkin-links">Link tickets to checkins</a></li>
<li><a href="#th1-usage">Fossil and Th1</a></li>
<li><a href="#versionCompressed">Versioning compressed files</a></li>
<li><a href="#ColorPicker">Color selector in check-in properties</a></li>
<li><a href="#SearchWiki">Searching wiki text</a></li>
<li><a href="#HighlightDiff">Highlight diff's</a></li>
</ul>
<h2><a name="CGI">Using <cite>Fossil</cite>'s Built-In CGI</a></h2>
<h3>Motivation</h3>
* You want to share a repository through your existing web infrastructure.
* You want to share more than one repository at the same time.
|
973
974
975
976
977
978
979
|
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
|
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
|
# found the search-term, so print where and what was found:
echo "$p"
echo "$foundtext"
echo "----"
fi
done
</verbatim>
<a name="HighlightDiff">
<h2>Highlight diff's</h2>
<h3>Problem</h3>
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.
<h3>Solution</h3>
The soultion was presented on tzhe mailing list (20-Jan-2011).
<verbatim>
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("<", "<");
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.
</verbatim>
|