visual-studio-codesyntax-highlightingtmlanguage

How to customize the theme of this syntax highlighter for VSCode (tmlanguage.json)?


I have a few questions about VSCode Syntax Highlighting tmLanguage.json that I haven't been able to find easily so far in browsing google and the VSCode docs (and textmate docs). All of these apply to building your own language extension (I used yo code to generate the project). Most of them are about my specific use case.

  1. How do you specify custom settings that the user can then override? I would like to specify word wrapping as a togglable option for my script.
  2. How do you pick some scope so the colors are what you'd like?
  3. How do I get the parentheses to be styled properly?

Here is what I have.

enter image description here

The styles are:

{
  "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
  "name": "MyScript",
  "patterns": [
    {
      "include": "#terms"
    },
    {
      "include": "#punctuations"
    },
    {
      "include": "#strings"
    },
    {
      "include": "#numbers"
    }
  ],
  "repository": {
    "terms": {
      "patterns": [
        {
          "name": "entity.name.type.language.myscript",
          "match": "([a-z][a-z0-9]*(?:-[a-z0-9]+)*)"
        },
        {
          "name": "entity.name.type.language.parens.myscript",
          "begin": "([a-z][a-z0-9]*(?:-[a-z0-9]+)*)\\(",
          "end": "\\)",
          "patterns": [
            {
              "includes": "#terms"
            },
            {
              "includes": "#strings"
            },
            {
              "includes": "#numbers"
            }
          ]
        }
      ]
    },
    "numbers": {
      "patterns": [
        {
          "name": "constant.numeric.integer.myscript",
          "match": "\\b(\\d+)\\b"
        },
        {
          "name": "constant.numeric.decimal.myscript",
          "match": "\\b(\\d+\\.\\d+)\\b"
        }
      ]
    },
    "punctuations": {
      "patterns": [
        {
          "name": "punctuation.separator.parameter.myscript",
          "match": ","
        },
        {
          "name": "punctuation.curly.open.myscript",
          "match": "\\{"
        },
        {
          "name": "punctuation.curly.close.myscript",
          "match": "\\}"
        }
      ]
    },
    "strings": {
      "name": "string.myscript",
      "begin": "\\<",
      "end": "\\>",
      "patterns": [
        {
          "name": "constant.character.escape.myscript",
          "match": "\\\\."
        },
        {
          "name": "punctuation.term.myscript",
          "begin": "\\{",
          "beginCaptures": {
            "0": {
              "name": "meta.brace.curly.myscript"
            }
          },
          "end": "\\}",
          "endCaptures": {
            "0": {
              "name": "meta.brace.curly.myscript"
            }
          },
          "patterns": [
            {
              "include": "#terms"
            },
            {
              "include": "#numbers"
            },
            {
              "include": "#strings"
            }
          ]
        }
      ]
    }
  },
  "scopeName": "source.myscript"
}

I got that turquoise color by picking entity.name.type, given my default GitHub theme. I don't expect to customize the theme, I just want it to map to a given set of colors within a theme. I would like:

I have been tinkering for a while trying to get the <text {term}> curly brackets to not be red, but I haven't been able to figure it out. Also the parentheses around another(123), they should be gray too.

I am not able to tell how the other languages defined their styles, like JSON (the blue I want):

enter image description here

Or other JSON:

enter image description here

The comma in the red should also be gray as well.


Solution

  • To specify custom configuration, use this in package.json:

    "contributes": {
    "configurationDefaults": {
      "[markdown]": {
        "editor.wordWrap": "on",
        "editor.quickSuggestions": false
      }
    },