git.roojs.org Git - pagedown/blob - demo/browser/demo.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4
   5     <head>
   6         <title>PageDown Demo Page</title>
   7
   8         <link rel="stylesheet" type="text/css" href="demo.css" />
   9
  10         <script type="text/javascript" src="../../Markdown.Converter.js"></script>
  11         <script type="text/javascript" src="../../Markdown.Sanitizer.js"></script>
  12         <script type="text/javascript" src="../../Markdown.Editor.js"></script>
  13     </head>
  14
  15     <body>
  16         <div class="wmd-panel">
  17             <div id="wmd-button-bar"></div>
  18             <textarea class="wmd-input" id="wmd-input">
  19 This is the *first* editor.
  20 ------------------------------
  21
  22 Just plain **Markdown**, except that the input is sanitized:
  23
  24 <marquee>I'm the ghost from the past!</marquee>
  25 </textarea>
  26         </div>
  27         <div id="wmd-preview" class="wmd-panel wmd-preview"></div>
  28
  29         <br /> <br />
  30
  31         <div class="wmd-panel">
  32             <div id="wmd-button-bar-second"></div>
  33             <textarea class="wmd-input" id="wmd-input-second">
  34 This is the *second* editor.
  35 ------------------------------
  36
  37 It has a plugin hook registered that surrounds all words starting with the
  38 letter A with asterisks before doing the Markdown conversion. Another one gives bare links
  39 a nicer link text. User input isn't sanitized here:
  40
  41 <marquee>I'm the ghost from the past!</marquee>
  42
  43 http://google.com
  44
  45 http://stackoverflow.com
  46
  47 It also includes a help button.
  48 </textarea>
  49         </div>
  50         <div id="wmd-preview-second" class="wmd-panel wmd-preview"></div>
  51
  52
  53         <script type="text/javascript">
  54             (function () {
  55                 var converter1 = Markdown.getSanitizingConverter();
  56                 var editor1 = new Markdown.Editor(converter1);
  57                 editor1.run();
  58
  59                 var converter2 = new Markdown.Converter();
  60
  61                 converter2.hooks.chain("preConversion", function (text) {
  62                     return text.replace(/\b(a\w*)/gi, "*$1*");
  63                 });
  64
  65                 converter2.hooks.chain("plainLinkText", function (url) {
  66                     return "This is a link to " + url.replace(/^https?:\/\//, "");
  67                 });
  68
  69                 var help = function () { alert("Do you need help?"); }
  70
  71                 var editor2 = new Markdown.Editor(converter2, "-second", { handler: help });
  72
  73                 editor2.run();
  74             })();
  75         </script>
  76     </body>
  77 </html>