merge view demo

    .replace("white", "purple;\n      font: comic sans;\n      text-decoration: underline;\n      height: 15em");
 
1
<head><title>CodeMirror: merge view demo</title>
2
<meta charset="utf-8">
3
<link rel="stylesheet" href="../doc/docs.css">
4
​
5
<link rel="stylesheet" href="../lib/codemirror.css">
6
<link rel="stylesheet" href="../addon/merge/merge.css">
7
<script src="../lib/codemirror.js"></script>
8
<script src="../mode/xml/xml.js"></script>
9
<script src="//cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>
10
<script src="../addon/merge/merge.js"></script>
11
<style>
12
    .CodeMirror { line-height: 1.2; }
13
    span.clicky {
14
      cursor: pointer;
15
      background: #d70;
16
      color: white;
17
      padding: 0 3px;
18
      border-radius: 3px;
19
    }
20
  </style>
21
</head><body><div id="nav">
22
  <a href="http://codemirror.net"><img id="logo" src="../doc/logo.png"></a>
23
​
24
  <ul>
25
    <li><a href="/experiments/lib/codemirror-4.4/">Home</a>
26
    </li><li><a href="/experiments/lib/codemirror-4.4/doc/manual">Manual</a>
27
    </li><li><a href="https://github.com/marijnh/codemirror">Code</a>
28
  </li></ul>
29
  <ul>
30
    <li><a class="active" href="#">merge view</a>
31
  </li></ul>
32
</div>
⇜
⇜
⇛⇚
109
 
1
<head><title>CodeMirror: merge view demo</title>
2
<meta charset="utf-8">
3
<link rel="stylesheet" href="../doc/docs.css">
4
​
5
<link rel="stylesheet" href="../lib/codemirror.css">
6
<link rel="stylesheet" href="../addon/merge/merge.css">
7
<script type=text/javascript  src="../lib/codemirror.js"></script>
8
<script type=text/javascript  src="../mode/xml/xml.js"></script>
9
<script type=text/javascript  src="//cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>
10
<script type=text/javascript  src="../addon/merge/merge.js"></script>
11
<style>
12
    .CodeMirror { line-height: 1.2; }
13
    span.clicky {
14
      cursor: pointer;
15
      background: #d70;
16
      color: purple;
17
      font: comic sans;
18
      text-decoration: underline;
19
      height: 15em;
20
      padding: 0 3px;
21
      border-radius: 3px;
22
    }
23
  </style>
24
</head><body><div id="nav">
25
  <a href="http://codemirror.net"><img id="logo" src="../doc/logo.png"></a>
26
​
27
  <ul>
28
    <li><a href="/experiments/lib/codemirror-4.4/">Home</a>
29
    </li><li><a href="/experiments/lib/codemirror-4.4/doc/manual">Manual</a>
30
    </li><li><a href="https://github.com/marijnh/codemirror">Code</a>
31
  </li></ul>
32
  <ul>

The merge addon provides an interface for displaying and merging diffs, either two-way or three-way. The left (or center) pane is editable, and the differences with the other pane(s) are optionally shown live as you edit it.

This addon depends on the google-diff-match-patch library to compute the diffs.