Monaco Editor | How to properly use Hover’s IMarkdownString with HTML

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: [
                {
                    supportHtml: true,
                    value: '<div style="color red; class="test">yes</div>'
                }
            ]
        };
    }
});

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

I’m trying to provide a HoverProvider for my editor but I can’t seem to render the element with a different foreground or classList, Am I doing something wrong here? It works okay but the style didn’t load / inserted to the hover content. I’m using IMarkdownString