[Feature Request] Display a table in diagnostic window of Monaco Editor

Context

• This issue is not a bug report. (please use a different template for reporting a bug)
• This issue is not a duplicate of an existing issue. (please use the search to find existing issues)

Description

(* I don’t know if it is an existing feature or not *)

In this sample of Monaco Editor, when we hover on the Hover over this text, we could see markdown result in the diagnostic window. The contents of the window are provided by the code:

	contents: [
	    { value: '**SOURCE**' },
		{ value: '```html\n' + res.responseText.substring(0, 200) + '\n```' }
	]

I’m wondering if it is possible to draw a table in the diagnostic window.

I tried to add { value: '| a | b | c | d | e | |---|---|---|---|---| | 1 | 2 | 3 | 4 | 5 |'}, it did not work.

Could anyone help?

[spahnke]

You can use a template string for that (the line breaks are important for the table rendering).

CSS (augmented from post above):

.monaco .hover-content table, th, td {
    border: 1px solid black;
}

Hover element:

contents: [
    { value: '**SOURCE**' },
    { value: `
| a | b | c | d | e |
|---|---|---|---|---|
| f | g | h | i | j |` 
    }
]

[rcjsuen]

I tried to add { value: '| a | b | c | d | e | |---|---|---|---|---| | 1 | 2 | 3 | 4 | 5 |'}, it did not work.

@chengtie You can achieve this with raw HTML and specifying supportHtml. You may also be interested in #801.

table, th, td {
  border: 1px solid black;
}

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

monaco.languages.registerHoverProvider('mySpecialLanguage', {
    provideHover: function (model) {
        return {
            range: new monaco.Range(1, 1, model.getLineCount(), model.getLineMaxColumn(model.getLineCount())),
            contents: [
                {
                    value: "<table><tr><td>abc</td><td>123</td></tr><tr><td>abc</td><td>123</td></tr></table>",
                    supportHtml: true
                },
            ]
        }
    }
});

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