在 Visual Studio Code 中自定义链接/URL 语法突出显示颜色? [英] Customize link / URL syntax highlighting color in Visual Studio Code?

问题描述

我正在创建自己的 Visual Studio Code 主题，并且我希望链接/URL 在 HTML 和 CSS 中具有自己的独立颜色.从我读过的内容来看，这似乎曾经是通过检测链接完成的，但现在应该使用 linkForeground.我在创建的 theme.json 文件中都尝试过，但似乎都不起作用.有谁知道如何在 Visual Studio Code .json 文件中自定义链接/URL 语法突出显示颜色?

这是我试过的...

{"name": "goto-definition-link",范围":链接前景"，设置":{前景":#4B83CD"}},

这是我在上面引用的讨论之一.

第二个更容易；只需使用 editorLink.activeForeground 颜色主题设置:

<代码>{类型":黑暗"，颜色": {"editorLink.activeForeground": "#ff0",...},令牌颜色":[ ... ]}

当您将鼠标悬停在链接上时，它会更改链接的颜色.不能按语言更改.

I am creating my own Visual Studio Code theme, and I want the links / URLs to have their own independent color in HTML and CSS. From what I have read it seems that this was once accomplished with detected-link, but should now use linkForeground. I have tried both in the theme.json file I created, but neither seems to work. Does anyone know how to customize link / URL syntax highlighting color in Visual Studio Code .json file?

This is what I tried...

{ "name": "goto-definition-link", "scope": "linkForeground", "settings": { "foreground": "#4B83CD" } },

Here is one of the discussions that I am referencing above.

https://github.com/Microsoft/vscode/issues/18378

解决方案

There are two parts to this: using syntax colors to set the color of links in the grammar and using workbench colors to set the color of a clickable link when the user hovers over it.

To set the syntax colors of a link, you need to determine a unique scope for the links and write a TextMate colorization rule that uses this scope. For example, using the Developer: Inspect TM Scope command in VS Code, I can see the css url() links have a scope of variable.parameter.url.css, so my theme would be:

{
    "type": "dark",
    "tokenColors": [
        {
            "scope": [
                "variable.parameter.url.css",
            ],
            "settings": {
                "foreground": "#f0f"
            }
        }
    }
}

The second one is easier; just use the editorLink.activeForeground color theme setting:

{
    "type": "dark",
    "colors": {
        "editorLink.activeForeground": "#ff0",
        ...
    },
    "tokenColors": [ ... ]
}

This changes the color of the link when you hover over it. It cannot be changed per language.

这篇关于在 Visual Studio Code 中自定义链接/URL 语法突出显示颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！