如何使用VS Code API在悬停消息上应用样式和HTML标签？

Question

如何使用VS Code API在悬停消息上应用样式和HTML标签？

7

我正在尝试使用MarkdownString样式或格式化悬停信息，但它总是导致空白或转义除外的所有内容，但我发现您可以使用span来设置样式，但是仅能使用PR中提到的color和background-color属性。

现在，它看起来就像普通文本一样丑陋，即使使用表格标记也不起作用。有没有办法改进这个问题？

我写的代码如下：

const markdown = new MarkdownString(`<p> Some label: <code>${value}</code></p>`);
markdown.isTrusted = true;

return new Hover(markdown, range);

- JeromeDL30

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mark · Accepted Answer

使用v1.61版本，您将拥有更多的markdownString选项。支持以下HTML标签：

allowedTags: ['ul', 'li', 'p', 'code', 'blockquote', 'ol', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'em', 'pre', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'div', 'del', 'a', 'strong', 'br', 'img', 'span'],

因此，通过使用b、h1等标签，您可以获得一些额外的“样式”。

/**
  * Indicates that this markdown string can contain raw html tags. Default to false.
  *
  * When `supportHtml` is false, the markdown renderer will strip out any raw html tags
  * that appear in the markdown text. This means you can only use markdown syntax for rendering.
  *
  * When `supportHtml` is true, the markdown render will also allow a safe subset of html tags
  * and attributes to be rendered. See https://github.com/microsoft/vscode/blob/6d2920473c6f13759c978dd89104c4270a83422d/src/vs/base/browser/markdownRenderer.ts#L296
  * for a list of all supported tags and attributes.
*/
  supportHtml?: boolean;

一些示例代码：

const value = "Jello";

const content = new vscode.MarkdownString(`<span style="color:#000;background-color:#fff;">Howdy there.</span>`);
content.appendMarkdown(`<p><b> Some label: <code>${value}</code></b></p>`)
content.supportHtml = true;

content.isTrusted = true;

return new vscode.Hover(content, new vscode.Range(position, position));

在我的测试中，您仍然只能使用

<span style="color:#000;background-color:#fff;">

除了color和background-color之外，不能使用其他样式。

您还可以使用这个：<span style='color:var(--vscode-charts-green);'>其中 charts.green 是对 ThemeColor 的引用。因此，您可以在 package.json 的 contributes color 选项中定义自己的 themeColor，并在 hoverProvider 中使用它。或者使用 vscode api reference: them colors 中的内置 themeColors。参见Allow use of --vscode-XXX color variables in style in Markdown。

以下是我用于进行样式设置、标记表格、代码块等的几个选项：

vscode.languages.registerHoverProvider('javascript', {
    provideHover(document, position, token) {
        
        // a markdown table, wrapping in a styled span did not work
        // had to style each "cell" separately
        // html entity &nbsp; works

        const markdown = new vscode.MarkdownString(`
|    <span style="color:#ff0;background-color:#000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Table&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>|    Header     |
|    :----:    |    :----:     |
|first cell    |second cell  |
|third cell    |<span style="color:#f00;background-color:#fff;">&nbsp;&nbsp;fourth cell&nbsp;&nbsp;</span>  |
        \n\n\n`);  // the newline is necessary for any following appends to work correctly, multiple newlines are reduced to one
        
        const styledString = `<span style="color:#fff;background-color:#666;">&nbsp;&nbsp;&nbsp;NASA code follows:&nbsp;&nbsp;&nbsp;</span>`;

        const codeBlock = `const a = 12;
if (a) return;`;    // any preceding tabs will be rendered in a template literal, so flush left

        // const codeBlock2 = `const c = 12;\nif (c) return;`;  // works, alternate form with newline

        markdown.appendText("______________________________\n");  // a fake separator
        markdown.appendMarkdown(styledString);
        markdown.appendCodeblock(codeBlock, "javascript");
        markdown.appendMarkdown(
`**Bold Text**
* some note
* another note
* final note`
        );

        markdown.isTrusted = true;

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

注意：由于某种原因，Markdown表格没有任何单元格或表格分隔符。