在 Monaco-Editor HoverProvider 中显示图像

Question

根据文档，monaco-editor 的 HoverProvider 支持 Markdown。 有没有办法让它显示图像？ 我在操场上尝试过这个（基于HoverProvider 示例），但它不起作用：

monaco.languages.register({ id: 'mySpecialLanguage' });

monaco.languages.registerHoverProvider('mySpecialLanguage', {
    provideHover: function (model, position) {
        return xhr('../playground.html').then(function (res) {
            return {
                range: new monaco.Range(1, 1, model.getLineCount(), model.getLineMaxColumn(model.getLineCount())),
                contents: [
                    { value: '<img src="https://www.sciencemag.org/sites/default/files/styles/inline__450w__no_aspect/public/dogs_1280p_0.jpg?itok=4t_1_fSJ"/>', isTrusted: true }
                ]
            }
        });
    }
});

monaco.editor.create(document.getElementById("container"), {
    value: '\n\nHover over this text',
    language: 'mySpecialLanguage'
});

function xhr(url) {
    var req = null;
    return new Promise(function (c, e) {
        req = new XMLHttpRequest();
        req.onreadystatechange = function () {
            if (req._canceled) { return; }

            if (req.readyState === 4) {
                if ((req.status >= 200 && req.status < 300) || req.status === 1223) {
                    c(req);
                } else {
                    e(req);
                }
                req.onreadystatechange = function () { };
            }
        };

        req.open("GET", url, true);
        req.responseType = "";

        req.send(null);
    }, function () {
        req._canceled = true;
        req.abort();
    });
}

它只是将内容显示为字符串

Answer 1

您应该以 Markdown 语法提供您的图像路径：

{ value: '![my image](https://www.sciencemag.org/sites/default/files/styles/inline__450w__no_aspect/public/dogs_1280p_0.jpg?itok=4t_1_fSJ)' }

在这种情况下，完整的操场代码如下所示（ 示例的修改版本）：

monaco.languages.register({ id: 'mySpecialLanguage' });

monaco.languages.registerHoverProvider('mySpecialLanguage', {
    provideHover: function (model, position) {
        return {
            range: new monaco.Range(1, 1, model.getLineCount(), model.getLineMaxColumn(model.getLineCount())),
            contents: [
                { value: '**SOURCE**' },
                { value: '![my image](https://www.sciencemag.org/sites/default/files/styles/inline__450w__no_aspect/public/dogs_1280p_0.jpg?itok=4t_1_fSJ)' }
            ]
        }
    }
});

monaco.editor.create(document.getElementById("container"), {
    value: '\n\nHover over this text',
    language: 'mySpecialLanguage'
});