visual-studio-code - 为 Visual Studio Code 实现自定义突出显示

Question

我有一个自定义类型的文件(扩展名为 .xyz)。我想在 Visual Studio Code 中为此文件实现自定义语法突出显示(例如，所有以“#”开头的行都是注释)。

有没有人有关于如何做到这一点的简单说明？我在文档中进行了搜索，但找不到完整且直接的示例。

非常感谢。

Answer 1

我找到了一篇很好的文章来解决您的问题:https://css-tricks.com/creating-a-vs-code-theme/

你也可以看看这个视频:https://www.youtube.com/watch?v=Su-cNLe0dgw&ab_channel=RAZR。

我建议您查看本指南以构建扩展(在本例中，一个用于主题)

https://code.visualstudio.com/api/extension-capabilities/theming

事实上，我自己为 .electric 文件创建了一个语言支持扩展。这是 github 存储库页面的链接。 https://github.com/XtremeDevX/electric/tree/master/Language%20Support

这个视频应该教你如何定制你的visual studio code主题，其实很简单。例如，这里是吸血鬼主题:

"colors": {
        "terminal.background": "#282A36",
        "terminal.foreground": "#F8F8F2",
        "terminal.ansiBrightBlack": "#6272A4",
        "terminal.ansiBrightRed": "#FF6E6E",
        "terminal.ansiBrightGreen": "#69FF94",
        "terminal.ansiBrightYellow": "#FFFFA5",
        "terminal.ansiBrightBlue": "#D6ACFF",
        "terminal.ansiBrightMagenta": "#FF92DF",
        "terminal.ansiBrightCyan": "#A4FFFF",
        "terminal.ansiBrightWhite": "#FFFFFF",
        "terminal.ansiBlack": "#21222C",
        "terminal.ansiRed": "#FF5555",
        "terminal.ansiGreen": "#50FA7B",
        "terminal.ansiYellow": "#F1FA8C",
        "terminal.ansiBlue": "#BD93F9",
        "terminal.ansiMagenta": "#FF79C6",
        "terminal.ansiCyan": "#8BE9FD",
        "terminal.ansiWhite": "#F8F8F2",
        "contrastBorder": "#191A21",
        "focusBorder": "#6272A4",
        "foreground": "#F8F8F2",
        "selection.background": "#BD93F9",
        "errorForeground": "#FF5555",
        "button.background": "#44475A",
        "button.foreground": "#F8F8F2",
        "dropdown.background": "#343746",
        "dropdown.border": "#191A21",
        "dropdown.foreground": "#F8F8F2",
        "input.background": "#282A36",
        "input.foreground": "#F8F8F2",
        "input.border": "#191A21",
        "input.placeholderForeground": "#6272A4",
        "inputOption.activeBorder": "#BD93F9",
        "inputValidation.infoBorder": "#FF79C6",
        "inputValidation.warningBorder": "#FFB86C",
        "inputValidation.errorBorder": "#FF5555",
        "badge.foreground": "#F8F8F2",
        "badge.background": "#44475A",
        "progressBar.background": "#FF79C6",
        "list.activeSelectionBackground": "#44475A",
        "list.activeSelectionForeground": "#F8F8F2",
        "list.dropBackground": "#44475A",
        "list.focusBackground": "#44475A75",
        "list.highlightForeground": "#8BE9FD",
        "list.hoverBackground": "#44475A75",
        "list.inactiveSelectionBackground": "#44475A75",
        "list.warningForeground": "#FFB86C",
        "list.errorForeground": "#FF5555",
        "activityBar.background": "#343746",
        "activityBar.inactiveForeground": "#6272A4",
}

我把它剪短了，因为文件中有很多代码行，但是，如果你转到你的 .vscode 文件夹(在 Windows 中，它位于 C:\Users\username\.vscode\ ) 应该有一个类似于您的主题的文件夹。

点击文件夹后，您应该进入 themes 目录，然后您应该会找到一个 json 文件，其中包含与我之前向您展示的类似的数据!

谢谢，如果您觉得这有帮助，我将不胜感激:)