Hovers don't support syntax highlighting like VS Code

[rcjsuen]

monaco-editor version: 0.11.x in the playground
Browser: Version 65.0.3325.181 (Official Build) (64-bit)
OS: Windows 10

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

monaco.editor.create(document.getElementById("container"), {
	value: 'var xxxx = ""\nxxxx.toString();',
	language: 'typescript'
});

If you try to hover over toString(), you'll get no syntax highlighting in the browser but you'll get something in VS Code.

VS Code 1.21.1

Monaco playground

[ryanlin1986]

This is very important code editing feature I believe.
Please consider this feature.

[rcjsuen]

Just in case I tried writing a code block explicitly in Markdown but it didn't colour anything.

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: '**asdf**' },
                { value:
                        '```js\n' + 
                        'var x = blah.toString();\n' + 
                        '```\n'
                },
                { value:
                        '```JavaScript\n' + 
                        'var x = blah.toString();\n' + 
                        '```\n'
                }
            ]
        }
	}
});

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

[AlexTugarev]

@rcjsuen could you try with another example? the one from monaco-languageclient for instance. I looks like it's working there for me.

[rcjsuen]

@AlexTugarev I'm not sure what case you would like tested exactly but it seems like Monaco is very selective about what "language" it supports in its Markdown code blocks. Consider the following piece of code where js and javascript works but JavaScript doesn't. Perhaps things are working on your end for the same reason.

monaco.languages.registerHoverProvider('javascript', {
	provideHover: function(model, position) {
        return {
            range: new monaco.Range(1, 1, model.getLineCount(), model.getLineMaxColumn(model.getLineCount())),
            contents: [
                { value:
                        '```js\n' + 
                        'var x = "string";\n' + 
                        '```\n'
                },
                { value:
                        '```javascript\n' + 
                        'var x = "string";\n' + 
                        '```\n'
                },
                { value:
                        '```JavaScript\n' + 
                        'var x = "string";\n' + 
                        '```\n'
                }
            ]
        }
	}
});

monaco.editor.create(document.getElementById("container"), {
	value: '// hover here',
	language: 'javascript'
});

[alexdima]

The discrepancy is because in monaco-typescript we are not using a fenced code block in markdown: https://github.com/Microsoft/monaco-typescript/blob/5d8e7bfc6abc35387d091da2fafcc400ad28b363/src/languageFeatures.ts#L332-L334

PR welcome.

[rcjsuen]

I tried wrapping the content in a code block but it's not quite the same as what's in VS Code.

[alexdima]

The coloring is given by the tokenizer.

VS Code uses a TM grammar for TypeScript:

While the editor uses the TS lexer to generate tokens:

They will never match, given the source code is tokenized with two different tokenization engines.

But equal effects can be achieved if you would write a different tokenizer...