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: tern.html

<!doctype html>

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

<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="#">Tern</a>
  </ul>
</div>

<article>
<h2>Tern Demo</h2>
<form><textarea id="code" name="code">// Use ctrl-space to complete something
// Put the cursor in or after an expression, press ctrl-o to
// find its type

var foo = ["array", "of", "strings"];
var bar = foo.slice(0, 2).join("").split("a")[0];

// Works for locally defined types too.

function CTor() { this.size = 10; }
CTor.prototype.hallo = "hallo";

var baz = new CTor;
baz.

// You can press ctrl-q when the cursor is on a variable name to
// rename it. Try it with CTor...

// When the cursor is in an argument list, the arguments are
// shown below the editor.

[1].reduce(  );

// And a little more advanced code...

var randomStr = myMod.randomElt(myMod.strList);
var randomInt = myMod.randomElt(myMod.intList);
</textarea></form>

<p>Demonstrates integration of <a href="http://ternjs.net/">Tern</a>
and CodeMirror. The following keys are bound:</p>

<dl>
  <dt>Ctrl-Space</dt><dd>Autocomplete</dd>
  <dt>Ctrl-O</dt><dd>Find docs for the expression at the cursor</dd>
  <dt>Ctrl-I</dt><dd>Find type at cursor</dd>
  <dt>Alt-.</dt><dd>Jump to definition (Alt-, to jump back)</dd>
  <dt>Ctrl-Q</dt><dd>Rename variable</dd>
  <dt>Ctrl-.</dt><dd>Select all occurrences of a variable</dd>
</dl>

<p>Documentation is sparse for now. See the top of
the <a href="../addon/tern/tern.js">script</a> for a rough API
overview.</p>

var server;
  getURL("//ternjs.net/defs/ecmascript.json", function(err, code) {
    if (err) throw new Error("Request for ecmascript.json: " + err);
    server = new CodeMirror.TernServer({defs: [JSON.parse(code)]});
    editor.setOption("extraKeys", {
      "Ctrl-Space": function(cm) { server.complete(cm); },
      "Ctrl-I": function(cm) { server.showType(cm); },
      "Ctrl-O": function(cm) { server.showDocs(cm); },
      "Alt-.": function(cm) { server.jumpToDef(cm); },
      "Alt-,": function(cm) { server.jumpBack(cm); },
      "Ctrl-Q": function(cm) { server.rename(cm); },
      "Ctrl-.": function(cm) { server.selectName(cm); }
    })
    editor.on("cursorActivity", function(cm) { server.updateArgHints(cm); });
  });

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    mode: "javascript"
  });
</script>

</article>