VS 代码装饰器扩展 Above/Below 指定范围

Question

目前有什么方法可以创建一个扩展，在指定范围之上或之下应用文本装饰器，我可以使用它来提供我想要的任何 HTML/CSS 视觉效果？

我仍在研究 API，我的猜测是不是，或者不是直接通过扩展 API。

Answer 1

这取决于你说的是什么类型的装饰品。既然你用了 "text decorator" 这个词，那么我假设你是在谈论装饰 API 描述的 here.

如您所见，他们正式支持几个 css 属性，但是 none 其中 "arbitrary css".

不过，我在 vscode dimmer extension 中所做的是使用此技术应用不透明样式：

dimDecoration = vscode.window.createTextEditorDecorationType(<vscode.DecorationRenderOptions> {
    textDecoration: `none; opacity: ${opacity / 100}`
});

当 vscode 看到这个时，它基本上将 text-decoration: none; opacity: 1 添加到 stylesheet.This 允许我使用任意样式。

上面的代码片段创建了一个 "Decoration"，然后可以将其应用于范围，如下所示。

function dimEditor(editor: vscode.TextEditor) {
    if (!dimDecoration) return;

    let startPosition = new vscode.Position(0, 0)
    let endPosition = new vscode.Position(editor.document.lineCount, Number.MAX_VALUE);
    editor.setDecorations(dimDecoration, [new vscode.Range(startPosition, endPosition)]);
}

免责声明： 当然，这不受官方支持，他们可以更改处理参数的方式以在第一个 ; 和任何使用此参数的人处停止解决方法会破坏扩展名。

编辑：

如果您想要 "hover" 行为，可以使用 HoverProvider api. It can take a "marked string" which is essentially markdown, and display it. This extension 在悬停时显示 img 预览。

如果 markdown 能满足你的需求，你可以尝试，否则你可以尝试任意 HTML 看看它是否接受。

VS 代码装饰器扩展 Above/Below 指定范围

VS Code Decorator Extension Above/Below specified Range

visual-studio-code

vscode-extensions