如何在 vscode.MarkdownString 中添加样式文本答案

【问题标题】：How to add styled text in vscode.MarkdownString如何在 vscode.MarkdownString 中添加样式文本
【发布时间】：2023-02-24 07:50:43
【问题描述】：

是否可以在 vscode.MarkdownString 中实现彩色文本？

当您将鼠标悬停在代码行时，我正在尝试像在 vscode 中那样实现弹出窗口。

我想在弹出窗口中为文本添加不同的颜色。

现在我正在使用这样的代码

const decorations: vscode.DecorationOptions[] = [];
const markdownString = new vscode.MarkdownString();
markdownString.supportHtml = true;
markdownString.appendMarkdown('markdown string');

decorations.push({
   range: new vscode.Range(new vscode.Position(lineNumber, 0), new vscode.Position(lineNumber, 0)),
   hoverMessage: markdownString
});

我尝试了不同的 html 标签，但它们对我不起作用。

【问题讨论】：

Markdown 的那部分是带有 languageid 的文字块，即突出显示的语法，VSC-core 具有比扩展 API 更大的 API
@rioV8 所以不可能？

标签： visual-studio-code markdown vscode-extensions

【解决方案1】：

我不太确定你是如何使用它的，但在我的测试中，这里是我使用的完整代码（js 不是打字稿）：

const decorations = [];
const markdownString = new vscode.MarkdownString();
markdownString.supportHtml = true;
markdownString.appendMarkdown('<span style="color:#f4f40b;background-color:#666;">markdown string</span>');
markdownString.appendText('
');
markdownString.appendMarkdown('<span style="color:#f00;background-color:#fff;">below markdown string</span>');

const lineNumber = 1;

decorations.push({
   range: new vscode.Range(new vscode.Position(lineNumber, 0), new vscode.Position(lineNumber, 3)),
   hoverMessage: markdownString
});

const decorationsOptions = vscode.window.createTextEditorDecorationType({color: "red"});
vscode.window.activeTextEditor.setDecorations(decorationsOptions, decorations);

用 <span style="color:#f4f40b;background-color:#666;"> some text here </span> 包裹你的 markdownString 文本。除了color 和background 之外，我认为您不能在style 属性中添加太多内容。

另请参阅 https://stackoverflow.com/a/67954180/836330 了解代码块和表格样式 - 它适用于 hoverProvider 但这没有什么区别。

【讨论】：