I am building a development application, thus I need an embedded code editor. Monaco is really nice for this since it is friendly to use and its features are very familiar for anyone coding with vs-code.
I write my app in java, so the monaco editor needs to be embedded into html with vanilla javascript. In other words: using the react-version of monaco isn’t an option.
I have downloaded the monaco files from the official website and put them aside this html file:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<link rel="stylesheet" data-name="vs/editor/editor.main" href="./min/vs/editor/editor.main.css">
<!-- ... -->
</head>
<body>
<div id="container"></div>
<script src="./min/vs/loader.js"></script>
<script>
require.config({
paths: {
'vs': './min/vs'
}
});
</script>
<script src="./min/vs/editor/editor.main.nls.js"></script>
<script src="./min/vs/editor/editor.main.js"></script>
<script>
const editor = monaco.editor.create(document.getElementById('container'), {
value: 'def main()ntprint("Hello world!")',
language: 'python',
//some more options
autoClosingPairs: [{ open: '{', close: '}' },{ open: '[', close: ']' },{ open: '(', close: ')' },{ open: '"', close: '"' },{ open: ''', close: ''' }],
});
</script>
</body>
</html>
This displays a nice editor and it has basic syntax highlighting, but none of the hover and autocomplete features.
When the language is changed to javascript, it is fully featured, but on python and other langauges it only has syntax highlighting.
How do I add autocomplete and hover-info for pyhton?
I found some codes to start a language server, but adding it had no effect.