I want to add the monaco editor in a angular project with syntax highlighting, intellisense and syntax checking for python. The language server from github (https://github.com/python-lsp/python-lsp-jsonrpc) and use this github repository to connect to the server: https://github.com/TypeFox/monaco-languageclient-ng-example. I changed the language to python and while the syntax checking works, there is no syntax highlighting and also no auto identation. Here is how I create the editor:
languages.register({
id: languageId,
extensions: [".py"],
aliases: ["python"],
mimetypes: ["application/python"],
});
// create the model
const uri = Uri.parse("/tmp/model.py");
const modelRef = await createModelReference(
uri,
this.createDefaultPythonContent()
);
modelRef.object.setLanguageId(languageId);
// create monaco editor
const editor = createConfiguredEditor(document.getElementById("container")!, {
model: modelRef.object.textEditorModel,
glyphMargin: true,
lightbulb: {
enabled: true,
},
automaticLayout: true,
});
I tried several things already:
- I tried using the default model which is created when the editor is created with the language python, but also with this approach, I don't get syntax highlighting:
const editor = createConfiguredEditor(document.getElementById("container")!, {
language: "python",
glyphMargin: true,
lightbulb: {
enabled: true,
},
automaticLayout: true,
});
- I tried importing the monaco-editor (using the service described here: Implement Monaco editor in Angular 13) and creating the model from a editor created via monaco.editor.create. Then the syntax highlighting and auto identation works, but it's not connected to the language server anymore:
const editor = monaco.editor.create(document.getElementById('container')!, {
value: this.createDefaultPythonContent(),
language: "python",
});