VS Code Decorator Extension高于/低于指定范围

Question

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

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

Answer 1

这取决于你所谈论的装饰类型。因为你使用了＆＃34;文本装饰＆＃34;然后我会假设您正在谈论所描述的装饰API here。

正如您所看到的，他们正式支持几种css属性，但它们都没有＆＃34;任意css＆＃34;。

我在vscode dimmer extension中所做的是使用此技术应用不透明风格：

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

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

上面的代码片段创建了一个＆＃34;装饰＆＃34;然后可以应用于如下所示的范围。

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

免责声明：当然，这不是官方支持的，他们可能会改变他们处理参数的方式，以便在第一个;停止，并且任何使用此解决方法的人都会一个破碎的扩展。

修改

如果你想要一个＆＃34;悬停＆＃34;行为，有HoverProvider api。它可以采用标记字符串＆＃34;这基本上是降价，并显示它。这个extension使用它来显示悬停时的img预览。

如果降价符合您的需求，您可以试试，否则您可以尝试使用任意HTML，看看是否接受了。