如何使用 vscode API 在悬停消息上应用样式和 html 标签？

Question

我正在尝试设置悬停消息的样式或格式MarkdownString，但它总是导致空白或转义所有内容，但我发现您可以使用span它来设置样式，但只能应用colorandbackground-color与此PR。

现在，它和纯文本一样丑陋，甚至使用表降价也不起作用。有没有办法改善这一点？

我写的如下：

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

return new Hover(markdown, range);

Answer 1

使用 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;

一些示例代码：

/**
  * 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;

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

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

color除了和之外没有其他样式background-color。

• 您还可以使用这个：<span style='color:var(--vscode-charts-green);'>wherecharts.green是对ThemeColor. 因此，您可以在 package.jsoncontributes color选项中定义您自己的 themeColor 并在您的hoverProvider 中使用它。或者使用 vscode api 参考中的内置 themeColors 之一：它们的颜色。请参阅允许在 Markdown 中的样式中使用 --vscode-XXX 颜色变量。

以下是一些适合我进行样式设置、降价表、代码块等的选项：

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));

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