4 <link rel=stylesheet href="../lib/codemirror.css">
5 <script src="../lib/codemirror.js"></script>
6 <script src="../mode/xml/xml.js"></script>
7 <script src="../addon/merge/dep/diff_match_patch.js"></script>
8 <link rel=stylesheet href="../addon/merge/merge.css">
9 <script src="../addon/merge/merge.js"></script>
10 <link rel="stylesheet" href="../doc/docs.css">
11 <title>CodeMirror: merge view demo</title>
13 .CodeMirror { line-height: 1.2; }
14 body { max-width: 80em; }
25 <h1>CodeMirror: merge view demo</h1>
29 <p>The <a href="../doc/manual.html#addon_merge"><code>merge</code></a>
30 addon provides an interface for displaying and merging diffs,
31 either <span class=clicky onclick="initUI(2)">two-way</span>
32 or <span class=clicky onclick="initUI(3)">three-way</span>. The left
33 (or center) pane is editable, and the differences with the other
34 pane(s) are shown live as you edit it.</p>
36 <p>This addon depends on
37 the <a href="https://code.google.com/p/google-diff-match-patch/">google-diff-match-patch</a>
38 library to compute the diffs.</p>
41 var value, orig1, orig2, dv;
43 function initUI(panes) {
44 if (value == null) return;
45 var target = document.getElementById("view");
46 target.innerHTML = "";
47 dv = CodeMirror.MergeView(target, {
49 origLeft: panes == 3 ? orig1 : null,
56 window.onload = function() {
57 value = document.documentElement.innerHTML;
58 orig1 = value.replace(/\.\.\//g, "codemirror/").replace("yellow", "orange");
59 orig2 = value.replace(/\u003cscript/g, "\u003cscript type=text/javascript ")
60 .replace("white", "purple;\n font: comic sans;\n text-decoration: underline;\n height: 15em");