<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
</head>
<body>
<div id="editors" style="display:flex;gap:5px;">
<div id="html" style="width: 33.33%;height:500px;"></div>
<div id="css" style="width: 33.33%;height:500px;"></div>
<div id="js" style="width: 33.33%;height:500px;"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/loader.min.js"></script>
<script>
let editors;
require.config({
"paths": {
"vs": "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs"
}
});
require(['vs/editor/editor.main'], () => {
editors = {
html: monaco.editor.create(document.getElementById('html'), {
language: 'html',
value: '',
theme: 'vs-dark'
}) ,
css: monaco.editor.create(document.getElementById('css'), {
language: 'css',
value: '',
theme: 'vs-dark'
}),
js: monaco.editor.create(document.getElementById('js'), {
language: 'text/javascript',
value: '',
theme: 'vs-dark'
})
}
});
</script>
</body>
</html>