Monaco Editor 显示编程语言和代码行数

Question

有什么办法可以在代码之上添加编程语言的名称吗？如图所示，并添加行代码的数字。

这是 api，但我找不到任何关于此信息的信息。

https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOptions.html

Answer 1

好吧，我不认为这个功能存在，但是有一个 codelens 功能，看起来像这样：

monaco editor playground 上有很多有用的信息，这里是codelens 例子。

默认情况下应添加行号，但如果没有，则使用

lineNumbers: 'on'

实例化编辑器。

这里是完整的例子：

let lang = 'SQL';
monaco.languages.register({ id: lang });

let editor = monaco.editor.create(document.getElementById("container"), {
    value: "some text here\nit's a second line",
    language: lang,
    lineNumbers: 'on',
});

monaco.languages.registerCodeLensProvider(lang, {
    provideCodeLenses: function (model, token) {
        return {
            lenses: [
                {
                    range: {
                        startLineNumber: 1,
                        startColumn: 1,
                        endLineNumber: 2,
                        endColumn: 1,
                    },
                    id: "language",
                    command: {
                        id: commandId,
                        title: lang,
                    },
                },
            ],
            dispose: () => {},
        };
    },
    resolveCodeLens: function (model, codeLens, token) {
        return codeLens;
    },
});

var commandId = editor.addCommand(
    0,
    function () {
        // this function is executed upon clicking on codelens
    },
    ""
);