Semantic Tokens in MarkupString / MarkupContent

Question

Is it possible to use MarkdownString/MarkupContent with code or pre with span to emulate semantic tokens in Hover? If so, is it possible to access the colors from the user's theme using only the CSS on the span elements? Ideally I would like to avoid using anything VSCode specific.

I saw https://github.com/microsoft/vscode/issues/97409 but there was no solution.

Answer 1

If you want to manually set colors for code you can try this:

// using your fileSelector
let disposable = vscode.languages.registerHoverProvider('plaintext', {
  provideHover(document, position) {

    const codeBlock = `<code><span style="color:#f00;background-color:#fff;">const</span> a = 12</code>`;

    const markdown = new vscode.MarkdownString();
    // markdown.appendCodeblock(codeBlock, "javascript");

    markdown.appendMarkdown(codeBlock);
    markdown.supportHtml  = true;
    markdown.isTrusted = true;

    return new vscode.Hover(markdown, new vscode.Range(position, position));
  }
});

<pre> also works, instead of <code>, but I think <code> looks better.