How to highlight syntax of block and inline comments in VSCode extensions?

Question

This is my goal to achieve:

This is what I get:

My little syntax highlighting vscode extension looks like this:

package.json (significant excerpt)

"contributes": {
    "languages": [{
      "id": "foo",
      "extensions": [".foo"],
      "configuration": "./language-configuration.json"
    }],
    "grammars": [{
      "language": "foo",
      "scopeName": "source.foo",
      "path": "./syntaxes/foo.tmLanguage.json"
    }],
    "themes": [
      {
        "label": "dark",
        "uiTheme": "vs-dark",
        "path": "./themes/d-color-theme.json"
      }
    ]
  }

language-configuration.json

{
    "comments": {
        "lineComment": "//",
        "blockComment": [ "\/*", "*\/" ]
    }
}

syntaxes/foo.tmLanguage.json

{
    "name": "Foo Language",
    "patterns": [
        {
            "include": "#longComments"
        },
        {
            "include": "#shortComments"
        },
        {
            "include": "#pascalCase"
        },
        {
            "include": "#camelCase"
        }

    ],
    "repository": {
        "longComments": {
            "patterns": [{
                "name": "blockComment.foo",
                "match": "\/*((?:.|\n)*?)*\/"
            }]
        },
        "camelCase": {
            "patterns": [{
                "name": "camelCase.foo",
                "match": "[a-z][a-z0-9A-Z_]*"
            }]
        },
        "pascalCase": {
            "patterns": [{
                "name": "pascalCase.foo",
                "match": "[A-Z][a-z0-9A-Z_]*"
            }]
        },
        "shortComments": {
            "patterns": [{
                "name": "lineComment.foo",
                "match": "\/\/[^\n]*"
            }]
        }
    },
    "scopeName": "source.foo"
}

themes/dark-color-theme.json

{
    "name": "dark",
    "colors": {
        "editor.background": "#263238",
        "editor.foreground": "#eeffff",
        "activityBarBadge.background": "#007acc",
        "sideBarTitle.foreground": "#bbbbbb"
    },
    "tokenColors": [
        {
            "name": "Pascal Case Identifiers",
            "scope": [
                "pascalCase.foo"
            ],
            "settings": {
                "foreground": "#06d44a"
            }
        },
        {
            "name": "Comment",
            "scope": [
                "blockComment.foo",
                "lineComment.foo"
            ],
            "settings": {
                "fontStyle": "italic",
                "foreground": "#546E7A"
            }
        },
        {
            "name": "Camel Case Identifiers",
            "scope": [
                "camelCase.foo"
            ],
            "settings": {
                "foreground": "#f7c63f"
            }
        }
    ]
}

What I tried is to replace the longComments specification in:

syntaxes/foo.tmLanguage.json (excerpt with replacement)

       "longComments": {
            "name": "blockComment.foo",
            "begin": "\/*",
            "end": "*\/",
            "patterns": [
                {
                    "name": "character.foo",
                    "match": "((?:.|\n)*?)*"
                }
            ]
        }

but then I see this:

This is my test text. You can copy-paste to reproduce the behavior.

// an Inline comment 
// an Inline comment that is even longer
PascalCaseWord AnotherPascalCaseWord
camelCaseWord, anotherCamelCaseWord
/* This is another multiline comment with some PascalCaseWord and some camelCaseWord */
/* This is another multiline comment with some PascalCaseWord and some camelCaseWord
that goes over two lines . */
/* This is another multiline comment with 
some PascalCaseWord 
and some camelCaseWord
that goes over three lines . */

How can I achieve my goal (see first screenshot)?

Answer 1

I could fix it. The problem was that my regex was not partially correct in one case also interfered with the way strings are escaped in JSON. The correct way to capture comments in a TextMate grammar (in my case) was:

"longComments": {
    "patterns": [{
        "name": "blockComment.foo",
        "begin": "/\\*",
        "end": "\\*/"
    }]
 },
"shortComments": {
     "patterns": [{
        "name": "lineComment.foo",
        "match": "(//).*\\n?"
     }]
 }