Import and initialize Monaco Editor with CSS and JavaScript.

by Oski Krawczyk

HTML

<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/min/vs/editor/editor.main.css"
/>
<div id="container1" style="width: 100%; height: 120px; border: 1px solid grey"></div>
<div id="container2" style="width: 100%; height: 120px; border: 1px solid grey"></div>
<script>
  var require = { paths: { vs: 'https://unpkg.com/[email protected]/min/vs' } };
</script>
<script src="https://unpkg.com/[email protected]/min/vs/loader.js"></script>
<script src="https://unpkg.com/[email protected]/min/vs/editor/editor.main.js"></script>

JavaScript

let options = {

}

var editor_css = monaco.editor.create(document.getElementById('container1'), {
  value: ['body {', '\tcolor: red;', '\tcolor: red;', '\tcolor: red;', '\tcolor: red;', '\tcolor: red;', '\tcolor: red;', '\tcolor: red;', '\tcolor: red;', '\tcolor: red;', '\tcolor: red;', '\tcolor: red;', '\tcolor: red;', '\tcolor: red;', '\tcolor: red;', '}'].join('\n'),
  language: 'css',
  roundedSelection: true,
	scrollBeyondLastLine: false,
	theme: "vs-dark",
  scrollbar: {
		// Subtle shadows to the left & top. Defaults to true.
		useShadows: false,
		verticalScrollbarSize: 10,
		horizontalScrollbarSize: 10
	},
  minimap: {
  	enabled: false
  },
  
});

var editor_js = monaco.editor.create(document.getElementById('container2'), {
  value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
  language: 'javascript'
});