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

// toggle vimacs arrow mode with option+space
let vimacsArrowMode = false;
window.addEventListener('keydown', function (event) {
	if (event.code === 'Space' && event.altKey) {
		vimacsArrowMode = !vimacsArrowMode;
		event.stopPropagation();
		event.preventDefault();
		return false;
	}
});

Object.defineProperty(KeyboardEvent.prototype, 'keyCode', {
	get: function() {
		if (vimacsArrowMode) {
			switch (this.code) {
				case 'KeyH': return 37; // left
				case 'KeyJ': return 40; // down
				case 'KeyK': return 38; // up
				case 'KeyL': return 39; // right
			}
		}
		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'
	});
});