← Back to branch summary

~ubuntu-branches/ubuntu/utopic/codemirror-js/utopic

« back to all changes in this revision

Viewing changes to demo/runmode.html

  • Committer: Package Import Robot
  • Author(s): David Paleino
  • Date: 2012-04-12 12:25:28 UTC
  • Revision ID: package-import@ubuntu.com-20120412122528-8xp5a8frj4h1d3ee
Tags: upstream-2.23
Import upstream version 2.23

Show diffs side-by-side

added added

removed removed

Lines of Context:
demo/runmode.html
 
1
<!doctype html>
 
2
<html>
 
3
  <head>
 
4
    <title>CodeMirror: Mode Runner Demo</title>
 
5
    <link rel="stylesheet" href="../lib/codemirror.css">
 
6
    <script src="../lib/codemirror.js"></script>
 
7
    <script src="../lib/util/runmode.js"></script>
 
8
    <script src="../mode/xml/xml.js"></script>
 
9
    <link rel="stylesheet" href="../doc/docs.css">
 
10
  </head>
 
11
  <body>
 
12
    <h1>CodeMirror: Mode Runner Demo</h1>
 
13
 
 
14
    <textarea id="code" style="width: 90%; height: 7em; border: 1px solid black; padding: .2em .4em;">
 
15
<foobar>
 
16
  <blah>Enter your xml here and press the button below to display
 
17
    it as highlighted by the CodeMirror XML mode</blah>
 
18
  <tag2 foo="2" bar="&amp;quot;bar&amp;quot;"/>
 
19
</foobar></textarea><br>
 
20
    <button onclick="doHighlight();">Highlight!</button>
 
21
    <pre id="output" class="cm-s-default"></pre>
 
22
 
 
23
    <script>
 
24
function doHighlight() {
 
25
  CodeMirror.runMode(document.getElementById("code").value, "application/xml",
 
26
                     document.getElementById("output"));
 
27
}
 
28
</script>
 
29
 
 
30
    <p>Running a CodeMirror mode outside of the editor.
 
31
    The <code>CodeMirror.runMode</code> function, defined
 
32
    in <code><a href="../lib/util/runmode.js">lib/runmode.js</a></code> takes the following arguments:</p>
 
33
 
 
34
    <dl>
 
35
      <dt><code>text (string)</code></dt>
 
36
      <dd>The document to run through the highlighter.</dd>
 
37
      <dt><code>mode (<a href="../doc/manual.html#option_mode">mode spec</a>)</code></dt>
 
38
      <dd>The mode to use (must be loaded as normal).</dd>
 
39
      <dt><code>output (function or DOM node)</code></dt>
 
40
      <dd>If this is a function, it will be called for each token with
 
41
      two arguments, the token's text and the token's style class (may
 
42
      be <code>null</code> for unstyled tokens). If it is a DOM node,
 
43
      the tokens will be converted to <code>span</code> elements as in
 
44
      an editor, and inserted into the node
 
45
      (through <code>innerHTML</code>).</dd>
 
46
    </dl>
 
47
 
 
48
  </body>
 
49
</html>