ace-builds
Version:
Ace (Ajax.org Cloud9 Editor)
95 lines (90 loc) • 4.27 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ACE whitespace extension Demo</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<style type="text/css" media="screen">
body {
overflow: hidden;
}
#editor {
margin: 0;
position: absolute;
top: 45px;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="../">Bootswatch</a>
<div class="nav-collapse collapse" id="main-menu">
<ul class="nav" id="main-menu-left">
<li><a onclick="pageTracker._link(this.href); return false;" href="http://news.bootswatch.com">News</a></li>
<li><a id="swatch-link" href="../#gallery">Gallery</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Preview <b class="caret"></b></a>
<ul class="dropdown-menu" id="swatch-menu">
<li><a href="../default/">Default</a></li>
<li class="divider"></li>
<li><a href="../amelia/">Amelia</a></li>
<li><a href="../cerulean/">Cerulean</a></li>
<li><a href="../cosmo/">Cosmo</a></li>
<li><a href="../cyborg/">Cyborg</a></li>
<li><a href="../flatly/">Flatly</a></li>
<li><a href="../journal/">Journal</a></li>
<li><a href="../readable/">Readable</a></li>
<li><a href="../simplex/">Simplex</a></li>
<li><a href="../slate/">Slate</a></li>
<li><a href="../spacelab/">Spacelab</a></li>
<li><a href="../spruce/">Spruce</a></li>
<li><a href="../superhero/">Superhero</a></li>
<li><a href="../united/">United</a></li>
</ul>
</li>
<li class="dropdown" id="preview-menu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Download <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a target="_blank" href="bootstrap.min.css">bootstrap.min.css</a></li>
<li><a target="_blank" href="bootstrap.css">bootstrap.css</a></li>
<li class="divider"></li>
<li><a target="_blank" href="variables.less">variables.less</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right" id="main-menu-right">
<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 & apps">Built With Bootstrap <i class="icon-share-alt"></i></a></li>
<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>
</ul>
</div>
</div>
</div>
</div>
<pre id="editor"></pre>
<div id="statusBar">ace rocks!</div>
<script src="../src-noconflict/ace.js"></script>
<script src="../src-noconflict/ext-statusbar.js"></script>
<script>
var editor = ace.edit("editor");
var StatusBar = ace.require('ace/ext/statusbar').StatusBar;
// create a simple selection status indicator
var statusBar = new StatusBar(editor, document.getElementById('statusBar'));
editor.setTheme("ace/theme/dawn");
editor.session.setMode("ace/mode/html");
</script>
<script src="./show_own_source.js"></script>
</body>
</html>