Skip to content

Instantly share code, notes, and snippets.

@darcyliu

darcyliu/ace_editor.html

Last active May 23, 2016 17:42
Show Gist options
  • Save darcyliu/45d261edc05c72d2b59b15cef3a044c4 to your computer and use it in GitHub Desktop.
Save darcyliu/45d261edc05c72d2b59b15cef3a044c4 to your computer and use it in GitHub Desktop.
Download ZIP
Ace code editor
Raw
ace_editor.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">
<style type="text/css" media="screen">
#editor {
margin: 10px 0;
height: 300px;
border-radius: 3px;
}
</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">
<form>
<div id="editor">#include&lt;stdio.h&gt;
int main(){
printf("Hello world!\n");
return 0;
}</div>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
</form>
</div>
</div>
<div class="text-center">---End of editor---</div>
</div>
<script src="https://ace.c9.io/build/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/solarized_dark");
editor.getSession().setMode("ace/mode/c_cpp");
editor.commands.addCommands([{
name: "showSettingsMenu",
bindKey: {win: "Ctrl-q", mac: "Command-q"},
exec: function(editor) {
editor.showSettingsMenu();
},
readOnly: true
}]);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment