CODEWITHSUNDEEP
visual-studio-codesyntax-highlighting
friol
friol

Reputation: 7096

Implementing custom highlight for Visual Studio Code

I have a custom type of file (with extension .xyz). I want to implement custom syntax highlighting for this file (for example, all lines beginning with "#" are comments) in Visual Studio Code.

Does anyone have simple instructions on how to do that? I searched in the documentation but couldn't find a complete and straightforward example.

Many thanks.

Upvotes: 3

Views: 277

Answers (1)

XtremeDevX
XtremeDevX

Reputation: 1802

I found a great article addressing your question : https://css-tricks.com/creating-a-vs-code-theme/

You could also check out this video : https://www.youtube.com/watch?v=Su-cNLe0dgw&ab_channel=RAZR.

I'd suggest you look into this guide for building extensions (in this case, one for a theme)

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

In fact I've myself created a extension for language support for a .electric file. Here's the link to the github repository page. https://github.com/XtremeDevX/electric/tree/master/Language%20Support

This video should teach you how to customize your visual studio code theme, it's quite simple actually. For example, here's the dracula theme:

"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",
}

I've cut it short because there's plenty lines of code in the file however, if you go to your .vscode folder (in windows it's at C:\Users\username\.vscode\) there should be a folder named something like your theme.

Once you click into the folder, you should go into the themes directory and then you should find a json file with data similar to what i showed you before!

Thanks, and if you found this helpful, I would appreciate an upvote :)

Upvotes: 4

Related Questions