css DecorationRenderOptions -在文本下创建蓝线时出现问题

euoag5mw  于 2022-12-27  发布在  其他
关注(0)|答案(1)|浏览(127)

我尝试在范围内的文本下添加一条蓝线,但文本周围始终出现蓝框或整个文本为蓝色

const blueMarkToggleType = vscode.window.createTextEditorDecorationType({
    isWholeLine: false, // apply the text decoration only to the marked characters
    textDecoration: "underline", // solid, dark blue line under the text
    color: "#0000FF", // solid, dark blue color for the text decoration
    overviewRulerLane: vscode.OverviewRulerLane.Center
  });
nhaq1z21

nhaq1z211#

textDecoration可以有比underline更多的选项,它可以直接包含下划线的颜色-所以下面的代码将创建一个蓝色下划线,而不需要对所有文本进行着色(color选项适用于所有文本):

const blueMarkToggleType = vscode.window.createTextEditorDecorationType({
    isWholeLine: false, // apply the text decoration only to the marked characters
    textDecoration: "underline #ff0000", // solid, dark blue line under the text
    // color: "#0000FF", // solid, dark blue color for the text decoration
    overviewRulerLane: vscode.OverviewRulerLane.Center
});

要尝试处理您选择的textDecoration颜色(我不认为这是可主题化的)在黑暗和光明主题中的显示方式,您可以通过添加darklight选项来覆盖默认的textDecoration

const blueMarkToggleType = vscode.window.createTextEditorDecorationType({
    isWholeLine: false, // apply the text decoration only to the marked characters
    textDecoration: "underline #ff0000", // solid, dark blue line under the text
    overviewRulerLane: vscode.OverviewRulerLane.Center,

    light: {
        textDecoration: "underline #0f0"  // green in a light theme
    },
    dark: {
        textDecoration: "underline #00f"  // blue in a dark theme
    }
});

相关问题