在Visual Studio代码中自定义语法突出显示

时间:2016-07-01 15:16:43

标签: visual-studio-code vscode-extensions

我目前正在尝试为新文件类型(ANTLR)编写扩展程序,并想知道如何在Visual Studio代码中更改用于语法突出显示的颜色。对我而言,它看起来好像没有在扩展中定义,而是在其他地方定义。没有颜色的首选项输入,也没有找到定义它的CSS文件(由于vscode使用Electron,因此我期待它)。我还查看了生成的设置文件vscode和随附的文件,但也没有任何线索。网络搜索也没有帮助。所以,我现在有点失落。

有人可以给我一些提示或指向相关文档吗?

4 个答案:

答案 0 :(得分:15)

派对有点晚了,但我会在这里添加,以免下一个人花几个小时的搜索。

这里有两个概念:

  • 语言语法,将文本文件转换为具有不同范围的标记,
  • 主题,以(希望)令人赏心悦目的方式将这些范围着色。

如果您正在编写自己的语法,或从TextMate等转换,那么您有可能使用与主题定义的范围不同的范围。在这种情况下,即使实际定义了令牌,也不会明确区分您定义的令牌。

有两种方法可以解决这个问题。首先是,使用自定义范围扩展主题并根据需要为它们着色。除非每个使用您语言的人都喜欢您的配色方案,否则这不是一个好方法。另一种是,使用VSCode和主题作者已经定义和着色的(有限集合)范围。很有可能,您的语言在您选择的主题中看起来很好,而在其他主题中则很好。

举个例子,这里是默认的深色VSCode主题定义的comment范围。

"name": "Dark Visual Studio",
"settings": [
    {
        "scope": "comment",
        "settings": {
            "foreground": "#608b4e"
        }
    },

这里是C ++语法的等效语言片段:

"comments": {
    "patterns": [
        {
            "captures": {
                "0": {
                    "name": "punctuation.definition.comment.java"
                }
            },
            "match": "/\\*\\*/",
            "name": "comment.block.empty.java"
        },

基本上,该语言根据需要在comment下定义了多个令牌,并且由于主题显示comment.*将为绿色,因此它们的颜色相同。

答案 1 :(得分:4)

语法突出显示规则存储在.plist个文件中(或者.tmLanguage个文件中)。在这些文件中,声明了语法高亮的不同标记类型:

  • 什么是关键字?
  • 什么是字符串文字?
  • 什么是评论?

点击此处了解有关它的更多信息:https://code.visualstudio.com/Docs/customization/colorizer

您没有在.plist个文件中定义颜色!

令牌类型和颜色之间的关系在颜色主题声明中完成。

在此处了解详情 https://code.visualstudio.com/Docs/customization/themesHow to add theme in Visual Studio Code?

通常,当您尝试扩展VSCode时,此文档也很有用:https://code.visualstudio.com/docs/extensionAPI/overview

答案 2 :(得分:0)

无需修补official documentation中的主题:

  

要调整编辑器的语法突出显示颜色,请在用户设置settings.json文件中使用editor.tokenColorCustomizations

除了简单的令牌自定义之外,您还可以使用稍微复杂一些的设置完全覆盖TextMate规则,例如:

"editor.tokenColorCustomizations": {"textMateRules": [{
        "scope": "keyword.control.ref.latex",
        "settings": {
            "foreground": "#FF0000"
        }
    }]}

答案 3 :(得分:0)

您可以考虑使用color theme

VSCode 1.44 (March 2020)起,您现在拥有

语义令牌的主题支持

颜色主题现在可以编写规则,以为诸如TypeScript之类的语言扩展报告的颜色语义标记添加颜色。

<div class="dropdown">
  <button class="dropbtn">Dropdown 1</button>
  <div class="dropdown-content">
    <a href="#home">Home 1</a>
    <a href="#about">About 1</a>
    <a href="#contact">Contact 1</a>
  </div>
</div>

<div class="dropdown">
  <button class="dropbtn">Dropdown 2</button>
  <div class="dropdown-content">
    <a href="#home">Home 2</a>
    <a href="#about">About 2</a>
    <a href="#contact">Contact 2</a>
  </div>
</div>

<div class="dropdown">
  <button  class="dropbtn">Dropdown 3</button>
  <div class="dropdown-content">
    <a href="#home">Home 3</a>
    <a href="#about">About 3</a>
    <a href="#contact">Contact 3</a>
  </div>
</div>

上面的规则定义,Java中所有只读变量的声明都应使用贪婪和粗体显示

有关更多信息,请参见Semantic Highlighting Wiki Page