index.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <title>Marked Demo</title>
  5. <link rel="stylesheet" href="./demo.css" type="text/css" />
  6. </head>
  7. <body>
  8. <a href="https://github.com/markedjs/marked">
  9. <img class="github-ribbon" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
  10. </a>
  11. <header>
  12. <a href="../">
  13. <img src="../img/logo-black.svg" height="64px" width="64px" />
  14. </a>
  15. <h1>Marked Demo</h1>
  16. </header>
  17. <div id="loading">Loading...</div>
  18. <div id="main">
  19. <div class="containers">
  20. <div class="container">
  21. <div class="label">
  22. <span>Input</span> ·
  23. <a id="permalink">Permalink</a> ·
  24. <span>Version: </span>
  25. <select id="markedVersion">
  26. <option value="pr">Add PR:</option>
  27. <option value="commit">Add Commit:</option>
  28. <option value="master" selected>master</option>
  29. </select>
  30. <input type="text" id="commitVersion" title="Press ENTER to add commit" />·
  31. <button id="clear">Clear</button>
  32. <select id="inputType">
  33. <option value="markdown">Markdown</option>
  34. <option value="options">Options</option>
  35. </select>
  36. </div>
  37. <textarea id="markdown" class="inputPane"></textarea>
  38. <textarea id="options" class="inputPane" placeholder="Options (as JSON)"></textarea>
  39. </div>
  40. <div class="container">
  41. <div class="label">
  42. <select id="outputType">
  43. <option value="preview">Preview</option>
  44. <option value="html">HTML Source</option>
  45. <option value="lexer">Lexer Data</option>
  46. <option value="quickref">Quick Reference</option>
  47. </select> ·
  48. Response Time:
  49. <span id="responseTime"></span>
  50. </div>
  51. <div id="preview" class="pane">
  52. <noscript>
  53. <h2>You'll need to enable Javascript to use this tool.</h2>
  54. </noscript>
  55. <iframe src="./preview.html" frameborder="0" sandbox="allow-same-origin allow-top-navigation-by-user-activation"></iframe>
  56. </div>
  57. <textarea id="html" class="pane" readonly="readonly"></textarea>
  58. <textarea id="lexer" class="pane" readonly="readonly"></textarea>
  59. <textarea id="quickref" class="pane" readonly="readonly"></textarea>
  60. </div>
  61. </div>
  62. </div>
  63. <script id="markedCdn"></script>
  64. <script src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.js"></script>
  65. <script src="https://cdn.jsdelivr.net/npm/unfetch/dist/unfetch.umd.js"></script>
  66. <script src="./demo.js"></script>
  67. </body>
  68. </html>