How to set font color for hover message?

Question

I use hoverMessage to show some message, and want to set the font color with html template. I have set property supportHtml to true, but it not working. How can I set the font color for hover message?

result in demo

Here are my codes:

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 you can see that the style attribute is only supported in the HTML span tag (which is what you're using). Looking further down (lines 308-309), the CSS defined in style needs to be a very specific format and align to these rules:

• Is only allowed the CSS properties color or background-color
• Must be defined in hex (colour names are not allowed)
• No space between color: and the hex value
• Must contain a semi colon at the end of the hex value

This explains why this doesn't work:

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

but this does:

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

If you copy and paste the following code into the Monaco playground, you should see it working:

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>`
                }]
            }
        }
    ]
);