Monaco Editor with custom language server syntax highlighting not working

673 views Asked by At

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",
        });
0

There are 0 answers