如何设置悬停消息的字体颜色？

Question

我用hoverMessage显示一些消息，想用html模板设置字体颜色。我已将属性 supportHtml 设置为 true，但它不起作用。如何设置悬停消息的字体颜色？

result in demo

这是我的代码：

var jsCode = [
    '"use strict";',
    'function Person(age) {',
    '   if (age) {',
    '       this.age = age;',
    '   }',
    '}',
    'Person.prototype.getAge = function () {',
    '   return this.age;',
    '};'
].join('\n');

var editor = monaco.editor.create(document.getElementById('container'), {
    value: jsCode,
    language: 'javascript'
});

var decorations = editor.deltaDecorations(
    [],
    [
        {
            range: new monaco.Range(3, 1, 5, 1),
            options: {
                isWholeLine: true,
                linesDecorationsClassName: 'myLineDecoration'
            }
        },
        {
            range: new monaco.Range(7, 1, 7, 24),
            options: { 
                inlineClassName: 'myInlineDecoration',
                hoverMessage: [{
                    value: '**Error occurs：**'
                }, {
                    // isTrusted: true,
                    // supportHtml: true,
                    value: `<span style="color: red !important">1111111111</span>`
                }, {
                    isTrusted: true,
                    supportHtml: true,
                    value: `<span style="color: yellow !important">22222222222222</span>`
                }]
            }
        }
    ]
);

Answer 1

This comment suggests that only a subset of HTML is supported in IMarkdownString. Looking at the markdownRenderer code 您可以看到 style 属性仅在 HTML span 标记（您正在使用的标记）中受支持。再往下看（第 308-309 行），style 中定义的 CSS 需要是一种非常具体的格式并符合这些规则：

只允许 CSS 属性 color 或 background-color
必须以十六进制定义（不允许使用颜色名称）
在 color: 和十六进制值
必须在十六进制值的末尾包含一个分号

这解释了为什么这不起作用：

<span style="color: yellow !important">22222222222222</span>

但这确实：

<span style="color:#ffff00;">22222222222222</span>

如果您将以下代码复制并粘贴到 Monaco playground，您应该会看到它正在运行：

var jsCode = [
    '"use strict";',
    'function Person(age) {',
    '   if (age) {',
    '       this.age = age;',
    '   }',
    '}',
    'Person.prototype.getAge = function () {',
    '   return this.age;',
    '};'
].join('\n');

var editor = monaco.editor.create(document.getElementById('container'), {
    value: jsCode,
    language: 'javascript'
});

var decorations = editor.deltaDecorations(
    [],
    [
        {
            range: new monaco.Range(3, 1, 5, 1),
            options: {
                isWholeLine: true,
                linesDecorationsClassName: 'myLineDecoration'
            }
        },
        {
            range: new monaco.Range(7, 1, 7, 24),
            options: { 
                inlineClassName: 'myInlineDecoration',
                hoverMessage: [{
                    value: '**Error occurs：**'
                }, {
                    isTrusted: true,
                    supportHtml: true,
                    value: `<span style="color:#ff0000;">1111111111</span>`
                }, {
                    isTrusted: true,
                    supportHtml: true,
                    value: `<span style="color:#ffff00;">22222222222222</span>`
                }]
            }
        }
    ]
);

如何设置悬停消息的字体颜色？

How to set font color for hover message?

monaco-editor