whitespace .html 4.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>ACE whitespace extension Demo</title>
  7. <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
  8. <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
  9. <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  10. <style type="text/css" media="screen">
  11. body {
  12. overflow: hidden;
  13. }
  14. #editor {
  15. margin: 0;
  16. position: absolute;
  17. top: 45px;
  18. bottom: 0;
  19. left: 0;
  20. right: 0;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div class="navbar navbar-fixed-top">
  26. <div class="navbar-inner">
  27. <div class="container">
  28. <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
  29. <span class="icon-bar"></span>
  30. <span class="icon-bar"></span>
  31. <span class="icon-bar"></span>
  32. </a>
  33. <a class="brand" href="../">Bootswatch</a>
  34. <div class="nav-collapse collapse" id="main-menu">
  35. <ul class="nav" id="main-menu-left">
  36. <li><a onclick="pageTracker._link(this.href); return false;" href="http://news.bootswatch.com">News</a></li>
  37. <li><a id="swatch-link" href="../#gallery">Gallery</a></li>
  38. <li class="dropdown">
  39. <a class="dropdown-toggle" data-toggle="dropdown" href="#">Preview <b class="caret"></b></a>
  40. <ul class="dropdown-menu" id="swatch-menu">
  41. <li><a href="../default/">Default</a></li>
  42. <li class="divider"></li>
  43. <li><a href="../amelia/">Amelia</a></li>
  44. <li><a href="../cerulean/">Cerulean</a></li>
  45. <li><a href="../cosmo/">Cosmo</a></li>
  46. <li><a href="../cyborg/">Cyborg</a></li>
  47. <li><a href="../flatly/">Flatly</a></li>
  48. <li><a href="../journal/">Journal</a></li>
  49. <li><a href="../readable/">Readable</a></li>
  50. <li><a href="../simplex/">Simplex</a></li>
  51. <li><a href="../slate/">Slate</a></li>
  52. <li><a href="../spacelab/">Spacelab</a></li>
  53. <li><a href="../spruce/">Spruce</a></li>
  54. <li><a href="../superhero/">Superhero</a></li>
  55. <li><a href="../united/">United</a></li>
  56. </ul>
  57. </li>
  58. <li class="dropdown" id="preview-menu">
  59. <a class="dropdown-toggle" data-toggle="dropdown" href="#">Download <b class="caret"></b></a>
  60. <ul class="dropdown-menu">
  61. <li><a target="_blank" href="bootstrap.min.css">bootstrap.min.css</a></li>
  62. <li><a target="_blank" href="bootstrap.css">bootstrap.css</a></li>
  63. <li class="divider"></li>
  64. <li><a target="_blank" href="variables.less">variables.less</a></li>
  65. </ul>
  66. </li>
  67. </ul>
  68. <ul class="nav pull-right" id="main-menu-right">
  69. <li><a rel="tooltip" target="_blank" href="http://builtwithbootstrap.com/" title="" onclick="_gaq.push(['_trackEvent', 'click', 'outbound', 'builtwithbootstrap']);" data-original-title="Showcase of Bootstrap sites &amp; apps">Built With Bootstrap <i class="icon-share-alt"></i></a></li>
  70. <li><a rel="tooltip" target="_blank" href="https://wrapbootstrap.com/?ref=bsw" title="" onclick="_gaq.push(['_trackEvent', 'click', 'outbound', 'wrapbootstrap']);" data-original-title="Marketplace for premium Bootstrap templates">WrapBootstrap <i class="icon-share-alt"></i></a></li>
  71. </ul>
  72. </div>
  73. </div>
  74. </div>
  75. </div>
  76. <pre id="editor"></pre>
  77. <div id="statusBar">ace rocks!</div>
  78. <script src="../src-noconflict/ace.js"></script>
  79. <script src="../src-noconflict/ext-statusbar.js"></script>
  80. <script>
  81. var editor = ace.edit("editor");
  82. var StatusBar = ace.require('ace/ext/statusbar').StatusBar;
  83. // create a simple selection status indicator
  84. var statusBar = new StatusBar(editor, document.getElementById('statusBar'));
  85. editor.setTheme("ace/theme/dawn");
  86. editor.session.setMode("ace/mode/html");
  87. </script>
  88. <script src="./show_own_source.js"></script>
  89. </body>
  90. </html>