-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
136 lines (115 loc) · 4.27 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<title>ConflictFormatter</title>
<meta charset="utf-8">
<meta name="description" content="Format code conflicts by displaying the underlying diffs separately.">
<meta name="author" content="Philipp Otto">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="diff2html/diff2html.min.css?cb=1" />
<link rel="stylesheet" type="text/css" href="./main.css">
<!-- Javascripts -->
<script type="text/javascript" src="diff2html/diff2html-ui.min.js?cb=1"></script>
<script type="text/javascript" src="jsdiff/diff.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
<script type="text/javascript" src="./main.js"></script>
</head>
<body>
<h1>
<span class="red-background">Conflict</span><!--
--><span class="green-background">Formatter</span>
</h1>
<div class="introduction">
<p>
Ever had a <span class="red-background">nasty</span> merge conflict in your code?
</p>
<p>
Most major version control systems like Git allow to enable a <span class="red-background">conflict</span> style, where you can see both conflicting versions as well as their common base version.
This is called <span class="green-background">diff3</span>.
</p>
<p>
But even then, it can be quite <span class="red-background">tedious</span> to find out, what exactly was changed in the two conflicting commits.
Usually, one ends up comparing the three versions manually.
This tool takes a diff3-style conflict as input and outputs the two underlying conflicting diffs.
Hopefully, this solves a few <span class="green-background">headaches</span> for you.
</p>
</div>
<textarea class="d2h-diff-table" id="conflict-input" rows="10" cols="120">
Just paste your code in this textarea!
<<<<<<< HEAD
This tool will extract two diffs per conflict and format it.
||||||| merged common ancestors
This tool will extract two diffs from the input and format it.
=======
This tool will extract two diffs from the input and will format it.
>>>>>>>
Take this as an example:
<<<<<<< HEAD
function binary_search(a, value, low, high) {
if (high < low) { return null; }
var mid = Math.floor((low + high) / 2);
if (a[mid] > value) {
return binary_search(a, value, low, mid - 1);
}
if (a[mid] < value) {
return binary_search(a, value, mid + 1, high);
}
return mid;
}
||||||| merged common ancestors
function binary_search(a, value, lo, hi) {
if (hi < lo) { return null; }
var mid = Math.floor((lo + hi) / 2);
if (a[mid] > value) {
return binary_search(a, value, lo, mid - 1);
}
if (a[mid] < value) {
return binary_search(a, value, mid + 1, hi);
}
return mid;
}
=======
class Searcher {
binary_search(a, value, lo, hi) {
if (hi < lo) { return null; }
var mid = Math.floor((lo + hi) / 2);
if (a[mid] > value) {
return binary_search(a, value, lo, mid - 1);
}
if (a[mid] < value) {
return binary_search(a, value, mid + 1, hi);
}
return mid;
}
}
>>>>>>>
<<<<<<< HEAD
You can even paste an entire file with one or multiple conflicts in it.
||||||| merged common ancestors
You can even paste an entire file.
=======
You can even paste an entire file with multiple conflicts in it.
>>>>>>>
</textarea>
<input
type="button"
id="diff-button"
style="font-size: 18px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin: 12px calc(50% - 46px);
padding: 4px 8px;"
value="Diff">
<div id="warning" class="hidden">
It seems as if your code conflicts are not shown in diff3 style. This tool is more useful, if you enable this.
For Git execute:
<pre>
git config --global merge.conflictstyle diff3
</pre>
</div>
<div id="diff-viewer-A"></div>
<div id="diff-viewer-B"></div>
<a href="https://github.com/philippotto/ConflictFormatter"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
</body>
</html>