Monaco Editor

HTML

<script src="https://unpkg.com/monaco-editor@0.8.3/min/vs/loader.js"></script>
<div id="container"></div>

CSS

html, body, #container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

Babel + JSX

Object.defineProperty(KeyboardEvent.prototype, 'keyCode', {
	get: function() {
		switch (this.key) {
			case 'h': return 37; // left
			case 'j': return 40; // down
			case 'k': return 38; // up
			case 'l': return 39; // right
			default: return this.which
		}
	}
})

require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@0.8.3/min/vs' }});
window.MonacoEnvironment = { getWorkerUrl: () => proxy };

let proxy = URL.createObjectURL(new Blob([`
	self.MonacoEnvironment = {
		baseUrl: 'https://unpkg.com/monaco-editor@0.8.3/min/'
	};
	importScripts('https://unpkg.com/monaco-editor@0.8.3/min/vs/base/worker/workerMain.js');
`], { type: 'text/javascript' }));

require(["vs/editor/editor.main"], function () {
	let editor = monaco.editor.create(document.getElementById('container'), {
		value: [
			'function x() {',
			'\tconsole.log("Hello world!");',
			'}'
		].join('\n'),
		language: 'javascript',
		theme: 'vs-dark'
	});
});