Monaco Editor

HTML

<script src="https://unpkg.com/[email protected]/min/vs/loader.js"></script>
 <pre id='code' data-lang="text/css">
 /* Some example CSS */ 
 
</pre>

CSS

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

Babel + JSX

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

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

require(["vs/editor/editor.main"], function () {
	const code = document.querySelector("#code");
  let textNode = document.createTextNode('@import url("something.css");'); 
	code.appendChild(textNode);
  
  setTimeout(() => {
		monaco.editor.colorizeElement(code, {}); 
	}, 1e3);
});