Ace Text editor

by Ben Clayton

HTML

<h4>
JS CODE
</h4>
<div class="wrapper">

<div id="editorJS" class="editor">function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}</div>
</div>
<h4>
CSS
</h4>

<div class="wrapper">

<div id="editorCSS" class="editor">.cls {
	width: 100px;
	}</div>
</div>



<script src="//pagecdn.io/lib/ace/1.4.5/ace.js" integrity="sha256-5Xkhn3k/1rbXB+Q/DX/2RuAtaB4dRRyQvMs83prFjpM=" crossorigin="anonymous"></script>

<script>
    var editor1 = ace.edit("editorJS");
		// https://github.com/ajaxorg/ace/tree/master/lib/ace/theme
    editor1.setTheme("ace/theme/monokai.css");
    editor1.session.setMode("ace/mode/javascript");
    var editor2 = ace.edit("editorCSS");
    editor2.setTheme("ace/theme/monokai");
    editor2.session.setMode("ace/mode/css");
</script>

CSS

.wrapper{
	width: calc(100% - 40px);
	height: 40vh;
	position:relative;
	margin:20px;
}
.editor {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}