CodeMirror

<p>

  <a class="add-panel" onclick="addPanel('top')">top</a>

  <a class="add-panel" onclick="addPanel('after-top')">after-top</a>

  <a class="add-panel" onclick="addPanel('before-bottom')">before-bottom</a>

  <a class="add-panel" onclick="addPanel('bottom')">bottom</a>

</p>

<p>

  You can also replace an existing panel:

</p>

<form onsubmit="return replacePanel(this);" name="replace_panel">

  <input type="submit" value="Replace panel n°">

  <input type="number" name="panel_id" min="1" value="1">

</form>

​

<script>

var textarea = document.getElementById("code");

var demo = document.getElementById("demo");

var numPanels = 0;

var panels = {};

var editor;

​

textarea.value = demo.innerHTML.trim();

editor = CodeMirror.fromTextArea(textarea, {

  lineNumbers: true,

  mode: "htmlmixed"

});

​

function makePanel(where) {

  var node = document.createElement("div");

  var id = ++numPanels;

  var widget, close, label;

​

  node.id = "panel-" + id;

  node.className = "panel " + where;

  close = node.appendChild(document.createElement("a"));

  close.setAttribute("title", "Remove me!");

  close.setAttribute("class", "remove-panel");

  close.textContent = "✖";

  CodeMirror.on(close, "mousedown", function(e) {

    e.preventDefault()

    panels[node.id].clear();

  });

  label = node.appendChild(document.createElement("span"));

  label.textContent = "I'm panel n°" + id;

  return node;

}

function addPanel(where) {

  var node = makePanel(where);

  panels[node.id] = editor.addPanel(node, {position: where, stable: true});

}

​

addPanel("top");

addPanel("bottom");

​

function replacePanel(form) {

  var id = form.elements.panel_id.value;

  var panel = panels["panel-" + id];

  var node = makePanel("");

​

  panels[node.id] = editor.addPanel(node, {replace: panel, position: "after-top", stable: true});

  return false;

}

</script>