multiplex.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  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. <style type="text/css">
  12. .CodeMirror {border: 1px solid black;}
  13. .cm-delimit {color: #fa4;}
  14. </style>
  15. </head>
  16. <body>
  17. <h1>CodeMirror: Multiplexing Parser Demo</h1>
  18. <form><textarea id="code" name="code">
  19. <html>
  20. <body style="<<magic>>">
  21. <h1><< this is not <html >></h1>
  22. <<
  23. multiline
  24. not html
  25. at all : &amp;amp; <link/>
  26. >>
  27. <p>this is html again</p>
  28. </body>
  29. </html>
  30. </textarea></form>
  31. <script>
  32. CodeMirror.defineMode("demo", function(config) {
  33. return CodeMirror.multiplexingMode(
  34. CodeMirror.getMode(config, "text/html"),
  35. {open: "<<", close: ">>",
  36. mode: CodeMirror.getMode(config, "text/plain"),
  37. delimStyle: "delimit"}
  38. // .. more multiplexed styles can follow here
  39. );
  40. });
  41. var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  42. mode: "demo",
  43. lineNumbers: true,
  44. lineWrapping: true
  45. });
  46. </script>
  47. <p>Demonstration of a multiplexing mode, which, at certain
  48. boundary strings, switches to one or more inner modes. The out
  49. (HTML) mode does not get fed the content of the <code>&lt;&lt;
  50. >></code> blocks. See
  51. the <a href="../doc/manual.html#addon_multiplex">manual</a> and
  52. the <a href="../addon/mode/multiplex.js">source</a> for more
  53. information.</p>
  54. </body>
  55. </html>