VS Code 装饰器扩展高于/低于指定范围

Question

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

我仍在使用 API，我的猜测是没有，或者不是直接通过扩展 API。

Answer 1

这取决于您所谈论的装饰类型。既然你使用了“文本装饰器”这个词，那么我假设你在谈论 here 描述的装饰 API。

如您所见，官方支持的 css 属性有几个，但没有一个是“任意 css”。

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

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

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

上面的 sn-p 创建了一个“装饰”，然后可以将其应用于范围，如下所示。

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

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

编辑：

如果您想要“悬停”行为，可以使用 HoverProvider api。它可以采用本质上是降价的“标记字符串”并显示它。这个extension 使用它在悬停时显示 img 预览。

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