minimal ace js editor + markdown
HTML
<div class="e" id="editor"></div>
<div class="c"></div>
<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
CSS
.e {
position: absolute;
top: 0;
right: 50%;
bottom: 0;
left: 0;
}
.c {
position: absolute;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
left: 50%;
}
JAVASCRIPT
function showResult(e) {
consoleEl.innerHTML = e
}
var e = ace.edit("editor");
e.setTheme("ace/theme/monokai");
e.getSession().setMode("ace/mode/markdown");
var consoleEl = document.getElementsByClassName("c")[0];
var converter = new Showdown.converter;
e.commands.addCommand({
name: "markdown",
bindKey: {
win: "Ctrl-M",
mac: "Command-O"
},
exec: function(t) {
var n = e.getSession().getMode().$id;
if (n == "ace/mode/markdown") {
showResult(converter.makeHtml(t.getValue()))
}
},
readOnly: true
})
