0

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.

michaelmesser
  • 3,601
  • 2
  • 19
  • 42
  • Are you trying to do something that `appendCodeblock(value: string, language?: string): MarkdownString` doesn't do? That gives you syntax highlighting. https://code.visualstudio.com/api/references/vscode-api#MarkdownString – Mark Jun 17 '22 at 05:02
  • @Mark I'm specifically looking for semantic tokens not TextMate syntax highlighting. I want to manually specify the colors and ranges. – michaelmesser Jun 17 '22 at 05:22

1 Answers1

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.

hover with span colored code demo

Mark
  • 143,421
  • 24
  • 428
  • 436