forked from ace-diff/ace-diff
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
80 lines (73 loc) · 3.21 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ace-diff</title>
<script src="libs/jquery.js"></script>
<script src="libs/diff_match_patch.js"></script>
<link rel=stylesheet href="demos/bootstrap.min.css">
<link rel=stylesheet href="demos/styles.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<span class="navbar-brand">Ace-diff</span>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://github.com/benkeen/ace-diff">Github</a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>Ace-diff</h1>
<div class="row">
<div class="col-sm-4">
<h4>About</h4>
<p>
This is a wrapper for Ace Editor to provide a 2-panel diffing/merging tool that visualizes differences
in two documents and allows users to copy changes from one doc to the other. If you're a developer,
you've seen it a billion times; this is one for Ace Editor.
</p>
<p>
It's built on top of <b>google-diff-match-patch</b> library, an algorithm for determining the diffs.
That handles the hard part: the computation of the diffs. This lib converts that raw diff info into
a visual representation on the screen for the user.
</p>
<p>
Click on the demos to the right to see how the script looks and operates. Then when you're ready,
click the button below to go to github for the documentation and code.
</p>
<button class="btn btn-primary" onclick="window.location='https://github.com/benkeen/ace-diff'">Read doc on github</button>
</div>
<div class="col-sm-4">
<a href="demos/screenshot1.png" target="_blank">
<img src="demos/screenshot1.png" width="100%" style="border: 1px solid #999999; margin-top: 40px"/>
</a>
<a href="demos/screenshot2.png" target="_blank">
<img src="demos/screenshot2.png" width="100%" style="border: 1px solid #999999; margin-top: 40px"/>
</a>
</div>
<div class="col-sm-4">
<h4>Demos</h4>
<ul>
<li>
<a href="demos/demo1/" target="_blank">Demo #1</a> -
this is a full-page editor with all the default settings. The default editor content (a JSON document)
is located in the page markup.
</li>
<li>
<a href="demos/demo2/" target="_blank">Demo #2</a> -
This demo passes the content to the AceDiff instance dynamically on page load, rather than rely
on the content being in the target editor divs (e.g. for when the content is coming from the server).
This makes the page load a lot smoother.
</li>
<li>
<a href="demos/demo3/" target="_blank">Dark theme</a> - shows off custom diff styles with a darker
theme.
</li>
</ul>
</div>
</div>
</div>
</body>
</html>