to-be-integrated/third-party/codemirror-3.15/demo/multiplex.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <title>CodeMirror: Multiplexing Parser Demo</title>
   6     <link rel="stylesheet" href="../lib/codemirror.css">
   7     <script src="../lib/codemirror.js"></script>
   8     <script src="../addon/mode/multiplex.js"></script>
   9     <script src="../mode/xml/xml.js"></script>
  10     <link rel="stylesheet" href="../doc/docs.css">
  11
  12     <style type="text/css">
  13       .CodeMirror {border: 1px solid black;}
  14       .cm-delimit {color: #fa4;}
  15     </style>
  16   </head>
  17   <body>
  18     <h1>CodeMirror: Multiplexing Parser Demo</h1>
  19
  20     <form><textarea id="code" name="code">
  21 <html>
  22   <body style="<<magic>>">
  23     <h1><< this is not <html >></h1>
  24     <<
  25         multiline
  26         not html
  27         at all : &amp;amp; <link/>
  28     >>
  29     <p>this is html again</p>
  30   </body>
  31 </html>
  32 </textarea></form>
  33
  34     <script>
  35 CodeMirror.defineMode("demo", function(config) {
  36   return CodeMirror.multiplexingMode(
  37     CodeMirror.getMode(config, "text/html"),
  38     {open: "<<", close: ">>",
  39      mode: CodeMirror.getMode(config, "text/plain"),
  40      delimStyle: "delimit"}
  41     // .. more multiplexed styles can follow here
  42   );
  43 });
  44 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  45   mode: "demo",
  46   lineNumbers: true,
  47   lineWrapping: true
  48 });
  49 </script>
  50
  51     <p>Demonstration of a multiplexing mode, which, at certain
  52     boundary strings, switches to one or more inner modes. The out
  53     (HTML) mode does not get fed the content of the <code>&lt;&lt;
  54     >></code> blocks. See
  55     the <a href="../doc/manual.html#addon_multiplex">manual</a> and
  56     the <a href="../addon/mode/multiplex.js">source</a> for more
  57     information.</p>
  58
  59     <p>
  60       <strong>Parsing/Highlighting Tests:</strong>
  61       <a href="../test/index.html#multiplexing_*">normal</a>,
  62       <a href="../test/index.html#verbose,multiplexing_*">verbose</a>.
  63     </p>
  64
  65   </body>
  66 </html>