Skip to content

Instantly share code, notes, and snippets.

@WarFox

WarFox/ace_editor_in_bootstrap_3_container.html

Last active October 27, 2016 08:12
Show Gist options
  • Save WarFox/6473534 to your computer and use it in GitHub Desktop.
Save WarFox/6473534 to your computer and use it in GitHub Desktop.
Download ZIP
Ace Editor Embedding in Bootstrap 3 container
Raw
ace_editor_in_bootstrap_3_container.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
#editor {
height: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Editor</h3>
</div>
<div class="panel-body">
<div id="editor">function foo(items) {
var x = "All this is syntax highlighted";
return x;
}</div>
</div>
</div>
<div class="text-center">---End of editor---</div>
</div>
<script src="/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
</script>
</body>
</html>
@WarFox
Copy link
Author

WarFox commented Feb 7, 2014

Read here
http://tech.deepumohan.com/2013/09/javascript-ace-editor-positioning-bootstrap.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment