golden hour

/home/phakp/public_html/formtools/global/codemirror/demo

File/Folder	Size	Actions
activeline.html	3.16 KB
anywordhint.html	2.62 KB
bidi.html	4.81 KB
btree.html	2.89 KB
buffers.html	3.48 KB
changemode.html	1.68 KB
closebrackets.html	1.64 KB
closetag.html	1.26 KB
complete.html	4.19 KB
emacs.html	2.42 KB
folding.html	4.13 KB
fullscreen.html	3.38 KB
hardwrap.html	2.51 KB
html5complete.html	1.73 KB
indentwrap.html	2.52 KB
lint.html	3.98 KB
loadmode.html	2.17 KB
marker.html	1.45 KB
markselection.html	1.83 KB
matchhighlighter.html	4.72 KB
matchtags.html	1.34 KB
merge.html	4.08 KB
multiplex.html	2.11 KB
mustache.html	2.05 KB
panel.html	3.38 KB
placeholder.html	1.47 KB
preview.html	2.36 KB
requirejs.html	2.27 KB
resize.html	1.33 KB
rulers.html	1.39 KB
runmode.html	2.21 KB
search.html	4.44 KB
simplemode.html	7.9 KB
simplescrollbars.html	4.89 KB
spanaffectswrapping_shim.html	2.97 KB
sublime.html	2.78 KB
tern.html	4.37 KB
theme.html	6.04 KB
trailingspace.html	1.53 KB
variableheight.html	2.02 KB
vim.html	3.88 KB
visibletabs.html	1.82 KB
widget.html	2.87 KB
xmlcomplete.html	3.62 KB

Edit: panel.html

<!doctype html>

<title>CodeMirror: Panel Demo</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">

<div id=nav>
  <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>

<ul>
    <li><a href="../index.html">Home</a>
    <li><a href="../doc/manual.html">Manual</a>
    <li><a href="https://github.com/codemirror/codemirror">Code</a>
  </ul>
  <ul>
    <li><a class=active href="#">Panel</a>
  </ul>
</div>

<h2>Panel Demo</h2>

<p>
  The <a href="../doc/manual.html#addon_panel"><code>panel</code></a>
  addon allows you to display panels above or below an editor.
  <br>
  Click the links below to add panels at the given position:
</p>

<div id="demo">
<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>

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, "click", function() {
    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>

</div>

</article>