.CodeMirror { line-height: 1.2; } @media screen and (min-width: 1300px) { article { max-width: 1000px; } #nav { border-right: 499px solid transparent; } } span.clicky { cursor: pointer; background: #d70; color: white; padding: 0 3px; border-radius: 3px; }
CodeMirror
Home Manual Code
merge view
merge view demo
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. In the two-way configuration, there are also options to pad changed sections to align them, and to collapse unchanged stretches of text.
This addon depends on the google-diff-match-patch library to compute the diffs.
var value, orig1, orig2, dv, panes = 2, highlight = true, connect = "align", collapse = false; function initUI() { if (value == null) return; var target = document.getElementById("view"); target.innerHTML = ""; dv = CodeMirror.MergeView(target, { value: value, origLeft: panes == 3 ? orig1 : null, orig: orig2, lineNumbers: true, mode: "text/html", highlightDifferences: highlight, connect: connect, collapseIdentical: collapse }); }
function toggleDifferences() { dv.setShowDifferences(highlight = !highlight); }
window.onload = function() { value = document.documentElement.innerHTML; orig1 = " \n\n" + value.replace(/\.\.\//g, "codemirror/").replace("yellow", "orange"); orig2 = value.replace(/\u003cscript/g, "\u003cscript type=text/javascript ") .replace("white", "purple;\n font: comic sans;\n text-decoration: underline;\n height: 15em"); initUI(); let d = document.createElement("div"); d.style.cssText = "width: 50px; margin: 7px; height: 14px"; dv.editor().addLineWidget(57, d) };
function mergeViewHeight(mergeView) { function editorHeight(editor) { if (!editor) return 0; return editor.getScrollInfo().height; } return Math.max(editorHeight(mergeView.leftOriginal()), editorHeight(mergeView.editor()), editorHeight(mergeView.rightOriginal())); }
function resize(mergeView) { var height = mergeViewHeight(mergeView); for(;;) { if (mergeView.leftOriginal()) mergeView.leftOriginal().setSize(null, height); mergeView.editor().setSize(null, height); if (mergeView.rightOriginal()) mergeView.rightOriginal().setSize(null, height);
var newHeight = mergeViewHeight(mergeView); if (newHeight >= height) break; else height = newHeight; } mergeView.wrap.style.height = height + "px"; }