我可以在悬停者中显示图像吗？

发布于 2025-02-03 07:45:02 字数 190 浏览 4 评论 0原文

我是VSCODE扩展开发的新手，因此不确定最好的帮助场所。我想悬停在一个单词上，如果该单词与我们的图标目录中的名称匹配，请与该图像显示悬停。我的第一次尝试是使用Markdown显示网络上的SVG图像，但我认为，可以执行代码的安全性。我可以在vscode.hover中的降价中显示SVG吗？我可以在扩展名中包括SVG，或者期望开发人员已经将NPM软件包安装到工作区中。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甜扑 2025-02-10 07:45:02

实际上，在徘徊的markdownstring中，对内容和样式有很丰富的支持。

您可以直接使用SVG的：

const icon = new vscode.MarkdownString('<img src="icon.svg"/>');
icon.baseUri = vscode.Uri.file(path.join(context.extensionPath, 'images', path.sep));

baseuri属性至关重要。在这里，它从images文件夹中获取SVG。

在下面，我将png图像添加到扩展名图像文件夹中。您可以检测到悬停的单词并加载相应的图标。

以下是在明文文件中进行测试：


// with this require/import
const path = require('path');

// ...

let disposable4 = vscode.languages.registerHoverProvider('plaintext', {
  provideHover(document, position) {

    // one way to find the current hovered word
    // note that what is a 'word' is languaged-defined and typically does not include hyphens
    // const word = document.getText(document.getWordRangeAtPosition(position));
    // first check if there is an icon for the hovered word, if not return undefined
    // glob the images folder and find 'icon'.svg
    // const icon = new vscode.MarkdownString(`<img src="${word}.svg"/>`);
  
    // dimensions not necessary if you aren't changing them
    const content = new vscode.MarkdownString(`<img src="favicon144.png" width=144 height=144/>`);

    content.appendMarkdown(`$(zap)`);  // notice the little "zap" icon in the hover

    content.supportHtml = true;

    content.isTrusted = true;

    content.supportThemeIcons = true;  // to supports codicons
    
    // baseUri was necessary, full path in the img src did not work
    // with your icons stroed in the 'images' directory
    content.baseUri = vscode.Uri.file(path.join(context.extensionPath, 'images', path.sep));            

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

There is actually quite rich support for content and styling in MarkdownString in hovers.

You can use svg's directly this way:

const icon = new vscode.MarkdownString('<img src="icon.svg"/>');
icon.baseUri = vscode.Uri.file(path.join(context.extensionPath, 'images', path.sep));

The baseUri property is crucial. Here it gets the svgs from an images folder.

In the below I added the png images to an extension images folder. You can detect what word is hovered and load the corresponding icon.

Below is testing in a plaintext file:


// with this require/import
const path = require('path');

// ...

let disposable4 = vscode.languages.registerHoverProvider('plaintext', {
  provideHover(document, position) {

    // one way to find the current hovered word
    // note that what is a 'word' is languaged-defined and typically does not include hyphens
    // const word = document.getText(document.getWordRangeAtPosition(position));
    // first check if there is an icon for the hovered word, if not return undefined
    // glob the images folder and find 'icon'.svg
    // const icon = new vscode.MarkdownString(`<img src="${word}.svg"/>`);
  
    // dimensions not necessary if you aren't changing them
    const content = new vscode.MarkdownString(`<img src="favicon144.png" width=144 height=144/>`);

    content.appendMarkdown(`$(zap)`);  // notice the little "zap" icon in the hover

    content.supportHtml = true;

    content.isTrusted = true;

    content.supportThemeIcons = true;  // to supports codicons
    
    // baseUri was necessary, full path in the img src did not work
    // with your icons stroed in the 'images' directory
    content.baseUri = vscode.Uri.file(path.join(context.extensionPath, 'images', path.sep));            

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