Currently I am building a Visual Studio Code Extension which will open a webview (html) as a preview. Currently it uses html as I've mentioned above to generate a view. I am currently looking to implement Monaco Editor inside of my extension code however I am unable to see the editor. I can only see the title:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>monaco editor</title>
<!-- MONACO CSS -->
<link rel="stylesheet" data-name="vs/editor/editor.main" href="_static/js/ext/monaco-editor/min/vs/editor/editor.main.css">
</head>
<body style="background-color: rgb(140, 190, 190);">
<h1>monaco editor</h1>
<div id="monaco_editor" style="height:400px">
</div>
<!-- MONACO JS -->
<script>var require = { paths: { 'vs': '_static/js/ext/monaco-editor/min/vs' } };</script>
<script src="_static/js/ext/monaco-editor/min/vs/loader.js"></script>
<script src="_static/js/ext/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
<script src="_static/js/ext/monaco-editor/min/vs/editor/editor.main.js"></script>
<script>
// CREATE AN EDITOR
var h_div = document.getElementById('monaco_editor');
var editor = monaco.editor.create(h_div, {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
</script>
</body>
</html>
Is this an issue with the paths not being present? Is there a better way to approach this?
