From 334224b4502fda9fd77684da63cac00b8a7c1ee7 Mon Sep 17 00:00:00 2001
From: Rikki Schulte <rikki.schulte@gmail.com>
Date: Wed, 10 Jan 2024 19:20:45 +0100
Subject: [PATCH] extend the markdown syntax for graphql (#3490)

* extend the markdown syntax for graphql
* more grammar support, add ruby
* apply suggestions from vscode discussion
---
 .changeset/clean-spies-sip.md                 |  10 +
 .eslintignore                                 |   1 +
 .eslintrc.js                                  |   1 +
 custom-words.txt                              |   2 +
 packages/vscode-graphql-syntax/README.md      | 194 +---
 .../grammars/graphql.js.json                  |  33 +-
 .../grammars/graphql.markdown.codeblock.json  |  28 +-
 .../grammars/graphql.php.json                 |   7 +-
 .../grammars/graphql.python.json              |   7 +-
 .../grammars/graphql.rb.json                  |  23 +
 .../grammars/graphql.re.json                  |   7 +-
 .../grammars/graphql.rescript.json            |   7 +-
 .../grammars/graphql.scala.json               |   7 +-
 packages/vscode-graphql-syntax/package.json   |  31 +-
 .../tests/__fixtures__/test-js.md             |  66 ++
 .../tests/__fixtures__/test-py.md             |  68 ++
 .../tests/__fixtures__/test.js                |  48 +-
 .../tests/__fixtures__/test.md                |  50 ++
 .../tests/__fixtures__/test.php               |  16 +-
 .../tests/__fixtures__/test.rb                |  22 +
 .../tests/__fixtures__/test.re                |  14 +
 .../tests/__fixtures__/test.ts                |   5 +-
 .../__snapshots__/js-grammar.spec.ts.snap     | 841 +++++++++++-------
 .../markdown-grammar.spec.ts.snap             | 151 ++++
 .../__snapshots__/php-grammar.spec.ts.snap    |  94 +-
 .../__snapshots__/reason-grammar.spec.ts.snap |  35 +
 .../__snapshots__/ruby-grammar.spec.ts.snap   |  47 +
 .../tests/markdown-grammar.spec.ts            |  19 +
 .../tests/reason-grammar.spec.ts              |  10 +
 .../tests/ruby-grammar.spec.ts                |  10 +
 packages/vscode-graphql/src/extension.ts      |   1 +
 resources/tsconfig.base.cjs.json              |   2 +-
 32 files changed, 1253 insertions(+), 604 deletions(-)
 create mode 100644 .changeset/clean-spies-sip.md
 create mode 100644 packages/vscode-graphql-syntax/grammars/graphql.rb.json
 create mode 100644 packages/vscode-graphql-syntax/tests/__fixtures__/test-js.md
 create mode 100644 packages/vscode-graphql-syntax/tests/__fixtures__/test-py.md
 create mode 100644 packages/vscode-graphql-syntax/tests/__fixtures__/test.md
 create mode 100644 packages/vscode-graphql-syntax/tests/__fixtures__/test.rb
 create mode 100644 packages/vscode-graphql-syntax/tests/__fixtures__/test.re
 create mode 100644 packages/vscode-graphql-syntax/tests/__snapshots__/markdown-grammar.spec.ts.snap
 create mode 100644 packages/vscode-graphql-syntax/tests/__snapshots__/reason-grammar.spec.ts.snap
 create mode 100644 packages/vscode-graphql-syntax/tests/__snapshots__/ruby-grammar.spec.ts.snap
 create mode 100644 packages/vscode-graphql-syntax/tests/markdown-grammar.spec.ts
 create mode 100644 packages/vscode-graphql-syntax/tests/reason-grammar.spec.ts
 create mode 100644 packages/vscode-graphql-syntax/tests/ruby-grammar.spec.ts

diff --git a/.changeset/clean-spies-sip.md b/.changeset/clean-spies-sip.md
new file mode 100644
index 00000000000..3235781f9a1
--- /dev/null
+++ b/.changeset/clean-spies-sip.md
@@ -0,0 +1,10 @@
+---
+'vscode-graphql': patch
+'vscode-graphql-syntax': patch
+---
+
+- add ruby syntax support
+- add graphql syntax support in markdown codeblocks for js, ts, jsx, tsx, svelte, vue, ruby, rescript, reason, ocaml, php and python
+- make textmate injectors more performant and specific, eliminate redundant config
+
+Big thanks to [@RedCMD](https://github.com/RedCMD) and [@aeschli](https://github.com/aeschli) for your help!
diff --git a/.eslintignore b/.eslintignore
index b248138fd9b..ac46f475f89 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -5,3 +5,4 @@ working-group/
 packages/codemirror-graphql/src/__tests__/schema-kitchen-sink.graphql
 CHANGELOG.md
 **/CHANGELOG.md
+packages/vscode-graphql-syntax/tests/__fixtures__/
diff --git a/.eslintrc.js b/.eslintrc.js
index 7e526a628b9..f9f7e78023c 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -30,6 +30,7 @@ module.exports = {
     'changesets/**/*.md',
     '**/CHANGELOG.md',
     'functions/*',
+    'packages/vscode-graphql-syntax/tests/__fixtures__/*',
   ],
   overrides: [
     {
diff --git a/custom-words.txt b/custom-words.txt
index 247e049b8d0..5c394dcf15b 100644
--- a/custom-words.txt
+++ b/custom-words.txt
@@ -94,6 +94,7 @@ typedoc
 vite
 vitest
 vitejs
+vsix
 wonka
 urql
 tsup
@@ -228,3 +229,4 @@ unparsable
 randomthing
 codicon
 edcore
+tokenizes
diff --git a/packages/vscode-graphql-syntax/README.md b/packages/vscode-graphql-syntax/README.md
index 31bc12bd463..a4040b662c2 100644
--- a/packages/vscode-graphql-syntax/README.md
+++ b/packages/vscode-graphql-syntax/README.md
@@ -4,180 +4,52 @@ Adds full GraphQL syntax highlighting and language support such as bracket
 matching.
 
 - Supports `.graphql`/`.gql`/`.graphqls` highlighting
-- [Javascript, Typescript & JSX/TSX](#ts) & Vue & Svelte
-- ReasonML/ReScript (`%graphql()` )
-- Python
-- PHP
-- [Markdown](#markdown)
-- [Scala](#scala)
+- Javascript, Typescript & JSX/TSX (examples: [test.js](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.js) & [test.ts](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts))
+- Vue (examples: [test-sfc-comp.vue](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test-sfc-comp.vue) & [test-sfc.vue](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test-sfc.vue))
+- Svelte (example: [test.svelte](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.svelte))
+- ReasonML/ReScript (`%graphql()` ) (example: [test.re](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.re))
+- Python (example: [test.py](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.py))
+- PHP (example: [test.php](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.php))
+- Markdown (examples: [test.md](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.md) & [test-py.md](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test-py.md))
+- Scala (example: [test.scala](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.scala))
+- ruby (example: [test.rb](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/tests/__fixtures__/test.rb))
 
 You'll want to install this if you do not use `graphql-config`, or want to use
 the highlighting with other extensions than `vscode-graphql`
 
-## Embedded Language Usage
-
-<span id="ts">
-### Javascript & Typescript
-
-The following delimiters are accepted for syntax highlighting. If you are using
-any of these patterns and they do not work, please open an issue!
-
-#### Template Literal Expressions
-
-```ts
-const query = gql`
-  {
-    id
-  }
-`;
-```
-
-you can use these template tag literal expressions anywhere you like of course
-
-```ts
-useFancyGraphQLClient(
-  graphql`
-    {
-      id
-    }
-  `,
-  {
-    networkStrategy: '🚀',
-  },
-);
-```
+## Contributing
 
-```ts
-const query = gql.experimental`{ id }`;
-```
-
-and in typescript, template tag expressions with type arguments
-
-```ts
-const query = gql<MyType>`
-  {
-    id
-  }
-`;
-```
-
-#### Function Expressions
-
-as well as normal function expressions with template literals
-
-```ts
-gql('{ id }');
-```
-
-```ts
-graphql(`
-  {
-    id
-  }
-`);
-```
-
-there is a bug with function expressions with type arguments like these that we
-need to fix:
-
-```ts
-gql<MyType>('{ id }');
-```
-
-Note, inline `""` and `''` string literals could also be delimited if needed,
-but we currently only delimit graphql template strings for obvious reasons
-
-#### Comment-Delimited patterns
-
-```ts
-const query = /* GraphQL */ `
-  {
-    id
-  }
-`;
-```
-
-```ts
-const query = `#graphql
- { id }
-`;
-```
-
-For full autocompletion, validation and other features, you can install
-`GraphQL.vscode-graphql`, which depends on this extension
-
-<span id="markdown">
-
-### Markdown
-
-#### backtick code blocks
-
-````markdown
-# Hello Jan
-
-```graphql
-query MyQuery {}
-```
-````
-
-#### embedded graphql in js & ts codeblocks
-
-simple js/ts`gql` & `graphql` template tag expression support inside any
-backtick codeblocks.
-
-````markdown
-# Hello Jan
-
-```js
-const myQuery = gql`
-  {
-    its {
-      query
-      time
-    }
-  }
-`;
-```
-````
-
-#### Scala
-
-Using a `graphql`, `gql` or `schema` string interpolator:
+Feel free to open a PR to fix, enhance any language support, or even add new
+languages 😍
 
-```scala
-val query = graphql"""
-  { id }
-"""
-val query2 = gql"""
-  { id }
-"""
-val query3 = schema"""
-  { id }
-"""
-```
+see:
 
-Using a comment-delimited pattern:
+- [the grammars](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/grammars/)
+- [the applicable vscode docs](https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide)
 
-```scala
-val query = """#graphql
- { id }
-"""
-```
+### Contributor Guide: Improving a Language
 
-## Other languages
-
-We actually support other languages than this! just need to extend this readme
-even further! 🥵
+Whether fixing a bug or adding a new delimiter for your language, here are a few tips for you:
 
-## Contributing
+1. TDD approach: add your bug case or new delimiter example to the relevant file in `tests/__fixtures__`
+1. run `yarn test -u` in the syntax extension workspace, and observe whether vscode-textmate tokenizes your example properly
+1. fix/update/add the relevant pattern, and repeat the above to see if the tokenization changes. you should see `meta.embedded.block.graphql`
+1. to test manually, run `yarn vsce:package` in the workspace and right click to install the bundled vsix extension, and open the fixture file
 
-Feel free to open a PR to fix, enhance any language support, or even add new
-languages 😍
+<span id="adding-a-lang"></span>
 
-see:
+### Contributor Guide: Adding a Language
 
-- [the grammars](grammars/)
-- [the applicable vscode docs](https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide)
+1.  add a file to [grammars](https://github.com/graphql/graphiql/blob/main/packages/vscode-graphql-syntax/grammars/) following our other examples.
+1.  be sure to add it to `package.json` contributions as well, in the `grammars` section. the `text.html.markdown` is for applying to markdown codeblocks
+1.  use a scope ala `source.{lang}` from a vscode-provided syntax grammar, or a popular, official contributed grammar. To find the name of the scope for any token's highlighting, use `Developer: Inspect Editor Tokens & Scopes` from the vscode command palette.
+1.  name it `inline.graphql.{lang}` for consistency
+1.  add a test file `tests/__fixture__` to document example usage, and a test spec to `__tests__` to assert the snapshot, pointing to the source you created
+1.  run `yarn test -u` in the workspace to add the snapshot
+1.  use the snapshots to ensure your capture groups are working and serializing the graphql as expected
+1.  in the test fixture, document all working cases and non working cases with Todo comments for common usage in your language. be sure to think of cases such as string interpolation and generics for typed languages.
+1.  add it to the list above in the readme, with links to your test fixtures as usage documentation
+1.  to manually test it in vscode itself, run `yarn vsce:package` in the syntax extension workspace and right click and install the bundled vsix file, then view the test fixture
 
 ## Usage Note
 
diff --git a/packages/vscode-graphql-syntax/grammars/graphql.js.json b/packages/vscode-graphql-syntax/grammars/graphql.js.json
index 43967155a74..d51e1dbea22 100644
--- a/packages/vscode-graphql-syntax/grammars/graphql.js.json
+++ b/packages/vscode-graphql-syntax/grammars/graphql.js.json
@@ -1,24 +1,10 @@
 {
-  "fileTypes": [
-    "js",
-    "jsx",
-    "mjs",
-    "cjs",
-    "es6",
-    "es",
-    "esm",
-    "ts",
-    "tsx",
-    "vue",
-    "svelte",
-    "cts",
-    "mts"
-  ],
-  "injectionSelector": "L:source -string -comment",
+  "scopeName": "inline.graphql",
+  "injectionSelector": "L:(meta.embedded.block.javascript | meta.embedded.block.typescript | source.js | source.ts | source.tsx | source.vue | source.svelte) -source.graphql -inline.graphql -string -comment",
   "patterns": [
     {
       "contentName": "meta.embedded.block.graphql",
-      "begin": "\\s*+(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental)|(/\\* GraphQL \\*/))\\s*\\(?\\s*(`)",
+      "begin": "\\s*+(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental)|(/\\* GraphQL \\*/))\\s*\\(?\\s*(`|'|\")",
       "beginCaptures": {
         "1": {
           "name": "variable.other.class.js"
@@ -36,7 +22,7 @@
           "name": "punctuation.definition.string.template.begin.js"
         }
       },
-      "end": "`",
+      "end": "(`|'|\")",
       "endCaptures": {
         "0": {
           "name": "punctuation.definition.string.template.end.js"
@@ -46,7 +32,7 @@
     },
     {
       "contentName": "meta.embedded.block.graphql",
-      "begin": "\\s*+(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental))\\s*\\(?\\s*(?:<.*>)(`)",
+      "begin": "\\s*+(?:(?:(Relay)\\??\\.)(QL)|(gql|graphql|graphql\\.experimental))\\s*\\(?\\s*(?:<.*>)(`|'|\")",
       "beginCaptures": {
         "1": {
           "name": "variable.other.class.js"
@@ -61,7 +47,7 @@
           "name": "punctuation.definition.string.template.begin.js"
         }
       },
-      "end": "`",
+      "end": "(`|'|\")",
       "endCaptures": {
         "0": {
           "name": "punctuation.definition.string.template.end.js"
@@ -72,7 +58,7 @@
     {
       "name": "taggedTemplates",
       "contentName": "meta.embedded.block.graphql",
-      "begin": "(`|')(#graphql)",
+      "begin": "(`|'|\")(#graphql)",
       "beginCaptures": {
         "1": {
           "name": "punctuation.definition.string.template.begin.js"
@@ -81,7 +67,7 @@
           "name": "comment.line.graphql.js"
         }
       },
-      "end": "(`|')",
+      "end": "(`|'|\")",
       "endCaptures": {
         "0": {
           "name": "punctuation.definition.string.template.end.js"
@@ -89,6 +75,5 @@
       },
       "patterns": [{ "include": "source.graphql" }]
     }
-  ],
-  "scopeName": "inline.graphql"
+  ]
 }
diff --git a/packages/vscode-graphql-syntax/grammars/graphql.markdown.codeblock.json b/packages/vscode-graphql-syntax/grammars/graphql.markdown.codeblock.json
index 5f974a76812..500a97adceb 100644
--- a/packages/vscode-graphql-syntax/grammars/graphql.markdown.codeblock.json
+++ b/packages/vscode-graphql-syntax/grammars/graphql.markdown.codeblock.json
@@ -1,16 +1,32 @@
 {
-  "fileTypes": [],
-  "scopeName": "markdown.graphql.codeblock",
-  "injectionSelector": "L:markup.fenced_code.block.markdown",
+  "scopeName": "inline.graphql.markdown.codeblock",
+  "injectionSelector": "L:text.html.markdown -meta.embedded.block",
   "patterns": [
     {
-      "contentName": "meta.embedded.block.graphql",
-      "begin": "(gql|graphql|GraphQL)(\\s+[^`~]*)?$",
-      "end": "(^|\\G)(?=\\s*[`~]{3,}\\s*$)",
+      "begin": "(^|\\G)(\\s*)(\\`{3,}|~{3,})\\s*(?i:(graphql|gql|GraphQL)(\\s+[^`~]*)?$)",
+      "name": "markup.fenced_code.block.markdown",
+      "end": "(^|\\G)(\\2|\\s{0,3})(\\3)\\s*$",
+      "beginCaptures": {
+        "3": {
+          "name": "punctuation.definition.markdown"
+        },
+        "4": {
+          "name": "fenced_code.block.language.markdown"
+        },
+        "5": {
+          "name": "fenced_code.block.language.attributes.markdown"
+        }
+      },
+      "endCaptures": {
+        "3": {
+          "name": "punctuation.definition.markdown"
+        }
+      },
       "patterns": [
         {
           "begin": "(^|\\G)(\\s*)(.*)",
           "while": "(^|\\G)(?!\\s*([`~]{3,})\\s*$)",
+          "contentName": "meta.embedded.block.graphql",
           "patterns": [
             {
               "include": "source.graphql"
diff --git a/packages/vscode-graphql-syntax/grammars/graphql.php.json b/packages/vscode-graphql-syntax/grammars/graphql.php.json
index 4427b637e3f..47e7c9951ef 100644
--- a/packages/vscode-graphql-syntax/grammars/graphql.php.json
+++ b/packages/vscode-graphql-syntax/grammars/graphql.php.json
@@ -1,6 +1,6 @@
 {
-  "fileTypes": ["php"],
-  "injectionSelector": "L:source -string -comment",
+  "scopeName": "inline.graphql.php",
+  "injectionSelector": "L:(meta.embedded.block.php | source.php -string -comment)",
   "patterns": [
     {
       "contentName": "meta.embedded.block.graphql",
@@ -126,6 +126,5 @@
         }
       ]
     }
-  ],
-  "scopeName": "inline.graphql.php"
+  ]
 }
diff --git a/packages/vscode-graphql-syntax/grammars/graphql.python.json b/packages/vscode-graphql-syntax/grammars/graphql.python.json
index ad3fd9c53eb..f399c5846c8 100644
--- a/packages/vscode-graphql-syntax/grammars/graphql.python.json
+++ b/packages/vscode-graphql-syntax/grammars/graphql.python.json
@@ -1,6 +1,6 @@
 {
-  "fileTypes": ["python"],
-  "injectionSelector": "L:source.python -string -comment",
+  "scopeName": "inline.graphql.python",
+  "injectionSelector": "L:(meta.embedded.block.python | source.python -string -comment)",
   "patterns": [
     {
       "contentName": "meta.embedded.block.graphql",
@@ -142,6 +142,5 @@
         }
       ]
     }
-  ],
-  "scopeName": "inline.graphql.python"
+  ]
 }
diff --git a/packages/vscode-graphql-syntax/grammars/graphql.rb.json b/packages/vscode-graphql-syntax/grammars/graphql.rb.json
new file mode 100644
index 00000000000..86ba7787d4c
--- /dev/null
+++ b/packages/vscode-graphql-syntax/grammars/graphql.rb.json
@@ -0,0 +1,23 @@
+{
+  "scopeName": "inline.graphql.rb",
+  "injectionSelector": "L:(meta.embedded.block.ruby | source.ruby -string -comment)",
+  "patterns": [
+    {
+      "name": "taggedTemplates",
+      "contentName": "meta.embedded.block.graphql",
+      "begin": "(?=(?><<[-~](['\"]?)((?:[_\\w]+_|)GRAPHQL)\\b\\1))",
+      "beginCaptures": {
+        "0": {
+          "name": "punctuation.definition.string.begin.ruby"
+        }
+      },
+      "end": "\\s*\\2$\\n?",
+      "endCaptures": {
+        "0": {
+          "name": "punctuation.definition.string.end.ruby"
+        }
+      },
+      "patterns": [{ "include": "source.graphql" }]
+    }
+  ]
+}
diff --git a/packages/vscode-graphql-syntax/grammars/graphql.re.json b/packages/vscode-graphql-syntax/grammars/graphql.re.json
index ed7b554ca26..b067ebf0681 100644
--- a/packages/vscode-graphql-syntax/grammars/graphql.re.json
+++ b/packages/vscode-graphql-syntax/grammars/graphql.re.json
@@ -1,6 +1,6 @@
 {
-  "fileTypes": ["re", "ml"],
-  "injectionSelector": "L:source -string -comment",
+  "scopeName": "inline.graphql.re",
+  "injectionSelector": "L:(meta.embedded.block.reason | meta.embedded.block.ocaml | source.ocaml | source.reason -string -comment)",
   "patterns": [
     {
       "contentName": "meta.embedded.block.graphql",
@@ -30,6 +30,5 @@
       "end": "(\\|}( )?])",
       "patterns": [{ "include": "source.graphql" }]
     }
-  ],
-  "scopeName": "inline.graphql.re"
+  ]
 }
diff --git a/packages/vscode-graphql-syntax/grammars/graphql.rescript.json b/packages/vscode-graphql-syntax/grammars/graphql.rescript.json
index d0ce9b2e0cf..4813c4ccb06 100644
--- a/packages/vscode-graphql-syntax/grammars/graphql.rescript.json
+++ b/packages/vscode-graphql-syntax/grammars/graphql.rescript.json
@@ -1,6 +1,6 @@
 {
-  "fileTypes": ["res", "resi"],
-  "injectionSelector": "L:source -string -comment",
+  "scopeName": "inline.graphql.res",
+  "injectionSelector": "L:(meta.embedded.block.rescript | source.rescript -string -comment)",
   "patterns": [
     {
       "contentName": "meta.embedded.block.graphql",
@@ -20,6 +20,5 @@
       "end": "(\\`( )?\\))",
       "patterns": [{ "include": "source.graphql" }]
     }
-  ],
-  "scopeName": "inline.graphql.res"
+  ]
 }
diff --git a/packages/vscode-graphql-syntax/grammars/graphql.scala.json b/packages/vscode-graphql-syntax/grammars/graphql.scala.json
index 2a91d5c226a..0e882e7cdb7 100644
--- a/packages/vscode-graphql-syntax/grammars/graphql.scala.json
+++ b/packages/vscode-graphql-syntax/grammars/graphql.scala.json
@@ -1,6 +1,6 @@
 {
-  "fileTypes": ["scala"],
-  "injectionSelector": "L:source -string -comment",
+  "scopeName": "inline.graphql.scala",
+  "injectionSelector": "L:(meta.embedded.block.scala | source.scala -string -comment)",
   "patterns": [
     {
       "contentName": "meta.embedded.block.graphql",
@@ -70,6 +70,5 @@
         }
       ]
     }
-  ],
-  "scopeName": "inline.graphql.scala"
+  ]
 }
diff --git a/packages/vscode-graphql-syntax/package.json b/packages/vscode-graphql-syntax/package.json
index 4fe7c56d283..feb95ad9e45 100644
--- a/packages/vscode-graphql-syntax/package.json
+++ b/packages/vscode-graphql-syntax/package.json
@@ -61,7 +61,8 @@
           "source.js.jsx",
           "source.tsx",
           "source.vue",
-          "source.svelte"
+          "source.svelte",
+          "text.html.markdown"
         ],
         "scopeName": "inline.graphql",
         "path": "./grammars/graphql.js.json",
@@ -72,7 +73,8 @@
       {
         "injectTo": [
           "source.reason",
-          "source.ocaml"
+          "source.ocaml",
+          "text.html.markdown"
         ],
         "scopeName": "inline.graphql.re",
         "path": "./grammars/graphql.re.json",
@@ -82,7 +84,8 @@
       },
       {
         "injectTo": [
-          "source.rescript"
+          "source.rescript",
+          "text.html.markdown"
         ],
         "scopeName": "inline.graphql.res",
         "path": "./grammars/graphql.rescript.json",
@@ -94,7 +97,7 @@
         "injectTo": [
           "text.html.markdown"
         ],
-        "scopeName": "markdown.graphql.codeblock",
+        "scopeName": "inline.graphql.markdown.codeblock",
         "path": "./grammars/graphql.markdown.codeblock.json",
         "embeddedLanguages": {
           "meta.embedded.block.graphql": "graphql"
@@ -102,7 +105,8 @@
       },
       {
         "injectTo": [
-          "source.python"
+          "source.python",
+          "text.html.markdown"
         ],
         "scopeName": "inline.graphql.python",
         "path": "./grammars/graphql.python.json",
@@ -112,7 +116,8 @@
       },
       {
         "injectTo": [
-          "text.html.php"
+          "text.html.php",
+          "text.html.markdown"
         ],
         "scopeName": "inline.graphql.php",
         "path": "./grammars/graphql.php.json",
@@ -122,13 +127,25 @@
       },
       {
         "injectTo": [
-          "source.scala"
+          "source.scala",
+          "text.html.markdown"
         ],
         "scopeName": "inline.graphql.scala",
         "path": "./grammars/graphql.scala.json",
         "embeddedLanguages": {
           "meta.embedded.block.graphql": "graphql"
         }
+      },
+      {
+        "injectTo": [
+          "source.ruby",
+          "text.html.markdown"
+        ],
+        "scopeName": "inline.graphql.rb",
+        "path": "./grammars/graphql.rb.json",
+        "embeddedLanguages": {
+          "meta.embedded.block.graphql": "graphql"
+        }
       }
     ]
   },
diff --git a/packages/vscode-graphql-syntax/tests/__fixtures__/test-js.md b/packages/vscode-graphql-syntax/tests/__fixtures__/test-js.md
new file mode 100644
index 00000000000..76601d15497
--- /dev/null
+++ b/packages/vscode-graphql-syntax/tests/__fixtures__/test-js.md
@@ -0,0 +1,66 @@
+# TODO: get tags inside of other code blocks working
+
+```js
+const variable = 1;
+
+const query = graphql`
+  query {
+    something(arg: ${variable})
+  }
+`;
+const Component = () => {
+  return <div>{query}</div>;
+};
+```
+
+```ts
+const variable: number = 1;
+
+graphql`
+    query {
+        something(variable: ${variable})
+    }
+`;
+const Component = () => {
+  return <div> </div>;
+};
+```
+
+### svelte
+
+```svelte
+<script>
+    const query = gql`
+    query {
+        hello
+    }
+    `;
+	let name = 'world';
+    const query = ``
+</script>
+
+<h1>Hello {name}!</h1>
+```
+
+## vue
+
+```vue
+<script>
+const query = gql`
+  query {
+    hello
+  }
+`;
+export default {
+  data() {
+    return {
+      message: 'Hello World!',
+    };
+  },
+};
+</script>
+
+<template>
+  <h1>{{ message }}</h1>
+</template>
+```
diff --git a/packages/vscode-graphql-syntax/tests/__fixtures__/test-py.md b/packages/vscode-graphql-syntax/tests/__fixtures__/test-py.md
new file mode 100644
index 00000000000..91433bdcf41
--- /dev/null
+++ b/packages/vscode-graphql-syntax/tests/__fixtures__/test-py.md
@@ -0,0 +1,68 @@
+# Python
+
+```Python
+
+query = gql(
+    """
+    query getContinents {
+      continents {
+        code
+        name
+      }
+    }
+  """
+)
+
+query = gql('''
+    query getContinents {
+      continents {
+        code
+        name
+      }
+    }
+'''
+)
+
+query = gql(
+'''
+    query getContinents {
+      continents {
+        code
+        name
+      }
+    }
+'''
+)
+
+'''#graphql
+    query getContinents {
+      continents {
+        code
+        name
+      }
+    }
+'''
+
+query = '''#graphql query getContinents {
+    continents {
+        code
+        name
+    }
+}'''
+
+"""#graphql
+    query getContinents {
+      continents {
+        code
+        name
+      }
+    }
+"""
+
+"""#graphql query getContinents {
+    continents {
+        code
+        name
+    }
+}"""
+```
diff --git a/packages/vscode-graphql-syntax/tests/__fixtures__/test.js b/packages/vscode-graphql-syntax/tests/__fixtures__/test.js
index cf1e702a5c1..4c74f4045fc 100644
--- a/packages/vscode-graphql-syntax/tests/__fixtures__/test.js
+++ b/packages/vscode-graphql-syntax/tests/__fixtures__/test.js
@@ -1,6 +1,9 @@
 /* eslint-disable */
+/* prettier-ignore */
 // @ts-nocheck
 
+const variable = 'test';
+
 gql`
   query {
     user(id: "5", name: boolean) {
@@ -19,12 +22,35 @@ graphql`
 
 const graphql = graphql`
   query {
-    user(id: "5", name: boolean) {
+    user(id: "5", name: ${variable}) {
       something
     }
   }
 `;
 
+const graphql = graphql(`
+  query {
+    user(id: "5", name: ${variable}) {
+      something
+    }
+  }
+`);
+
+const query = /* GraphQL */ 'query { id } ';
+const query = graphql('query { id } ');
+
+const queryWithInlineComment = `#graphql
+ query {
+        user(id: "5", name: boolean) {
+            something
+        }
+    }
+`;
+
+const queryWithInlineComment = '#graphql query { id } ';
+
+const queryWithInlineComment = '#graphql query { id } ';
+
 const queryWithInlineComment = `#graphql
  query {
         user(id: "5", name: boolean) {
@@ -32,6 +58,15 @@ const queryWithInlineComment = `#graphql
         }
     }
 `;
+// TODO: fix this
+const queryWithInlineComment = `
+#graphql
+ query {
+        user(id: "5", name: boolean) {
+            something
+        }
+    }
+`;
 
 const queryWithLeadingComment = /* GraphQL */ `
   query {
@@ -40,3 +75,14 @@ const queryWithLeadingComment = /* GraphQL */ `
     }
   }
 `;
+
+// TODO: fix this
+const queryWithLeadingAboveComment =
+  /* GraphQL */
+  `
+    query {
+      user(id: "5", name: boolean) {
+        something
+      }
+    }
+  `;
diff --git a/packages/vscode-graphql-syntax/tests/__fixtures__/test.md b/packages/vscode-graphql-syntax/tests/__fixtures__/test.md
new file mode 100644
index 00000000000..bdc1bf01e25
--- /dev/null
+++ b/packages/vscode-graphql-syntax/tests/__fixtures__/test.md
@@ -0,0 +1,50 @@
+# this is an MD file
+
+It would be a shame if the word `graphql` accidentally triggered highlighting
+Looks like it doesn't though! good
+
+```graphql
+query {
+  something
+}
+```
+
+```gql
+# comment
+query {
+  something
+}
+```
+
+```GraphQL
+query {
+    something @directive(first: "string")
+}
+
+type Example {
+    something
+}
+```
+
+```php
+<?php
+  $query = <<<GRAPHQL
+    query {
+      site {
+        name
+      }
+    }
+  GRAPHQL;
+?>
+```
+
+```ruby
+ it "Should delimit queries" do
+    query3 = <<~'GRAPHQL'
+    {
+        datasets(q: { idEq: 3 }) { id, daylight }
+    }
+    GRAPHQL
+end
+
+```
diff --git a/packages/vscode-graphql-syntax/tests/__fixtures__/test.php b/packages/vscode-graphql-syntax/tests/__fixtures__/test.php
index 5cb59fb2861..95446ddc104 100644
--- a/packages/vscode-graphql-syntax/tests/__fixtures__/test.php
+++ b/packages/vscode-graphql-syntax/tests/__fixtures__/test.php
@@ -1,4 +1,15 @@
-<!-- these seem horribly regressed. please someone fix this grammar! -->
+<?php
+
+## TODO: not yet supported
+$graphql = graphql([
+    'query' => "{
+  post(idType: SLUG, id: 2) {
+    title
+    content
+    date
+  }
+}"
+]);
 
 $query = <<<GRAPHQL
   query {
@@ -8,6 +19,7 @@
   }
 GRAPHQL;
 
+## TODO: not yet supported
 $gql = <<<QUERY
 query {
     pokemon(name: "Pikachu") {
@@ -25,4 +37,4 @@
 }
 QUERY;
 
-
+?>
diff --git a/packages/vscode-graphql-syntax/tests/__fixtures__/test.rb b/packages/vscode-graphql-syntax/tests/__fixtures__/test.rb
new file mode 100644
index 00000000000..38cd1759540
--- /dev/null
+++ b/packages/vscode-graphql-syntax/tests/__fixtures__/test.rb
@@ -0,0 +1,22 @@
+it "Should find datasets by ransack" do
+    dataset = Dataset.last
+    query = <<~GRAPHQL
+    {
+        datasets(q: { idEq: 3 }) { id, daylight }
+    }
+    GRAPHQL
+    data = Util.graphql_query(query)
+    expect(data['datasets'][0]["daylight"]).to eq dataset.daylight
+
+    query2 = <<-GRAPHQL
+    {
+        datasets(q: { idEq: #{dataset.id} }) { id, daylight }
+    }
+    GRAPHQL
+
+    query3 = <<~'GRAPHQL'
+    {
+        datasets(q: { idEq: #{dataset.id} }) { id, daylight }
+    }
+    GRAPHQL
+end
diff --git a/packages/vscode-graphql-syntax/tests/__fixtures__/test.re b/packages/vscode-graphql-syntax/tests/__fixtures__/test.re
new file mode 100644
index 00000000000..6780f10b1fd
--- /dev/null
+++ b/packages/vscode-graphql-syntax/tests/__fixtures__/test.re
@@ -0,0 +1,14 @@
+module VideoGames = [%graphql
+  {|
+  query VideoGames {
+    videoGames {
+      id
+      title
+      developer
+      completed
+    }
+  }
+|}
+];
+
+module VideoGamesQuery = ReasonApollo.CreateQuery(VideoGames);
diff --git a/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts b/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts
index 36cd7acb37b..b8e507901b6 100644
--- a/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts
+++ b/packages/vscode-graphql-syntax/tests/__fixtures__/test.ts
@@ -17,7 +17,7 @@ graphql<SomeGeneric>`
   }
 `;
 
-const graphql = graphql<SomeGeneric>`
+const query = graphql<SomeGeneric>`
   query {
     user(id: "5", name: boolean) {
       something
@@ -25,6 +25,9 @@ const graphql = graphql<SomeGeneric>`
   }
 `;
 
+// TODO: Fix this
+const query = graphql<Generic>('query { id }');
+
 const queryWithInlineComment = `#graphql
  query {
         user(id: "5", name: boolean) {
diff --git a/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap b/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap
index 4cf1efbbfcd..f16fc4b554a 100644
--- a/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap
+++ b/packages/vscode-graphql-syntax/tests/__snapshots__/js-grammar.spec.ts.snap
@@ -1,175 +1,333 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`inline.graphql grammar > should tokenize a simple ecmascript file 1`] = `
-/* eslint-disable */            | 
-// @ts-nocheck                  | 
-                                | 
-gql                             | entity.name.function.tagged-template.js
-\`                               | punctuation.definition.string.template.begin.js
-                                | meta.embedded.block.graphql
-query                           | meta.embedded.block.graphql keyword.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-{                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-user                            | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
-(                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-id                              | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
-5                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
-"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
-,                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-name                            | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
- boolean                        | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
-)                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-{                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-something                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-}                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-}                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-\`                               | punctuation.definition.string.template.end.js
-;                               | 
-                                | 
-graphql                         | entity.name.function.tagged-template.js
-\`                               | punctuation.definition.string.template.begin.js
-                                | meta.embedded.block.graphql
-query                           | meta.embedded.block.graphql keyword.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-{                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-user                            | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
-(                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-id                              | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
-5                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
-"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
-,                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-name                            | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
- boolean                        | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
-)                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-{                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-something                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-}                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-}                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-\`                               | punctuation.definition.string.template.end.js
-;                               | 
-                                | 
-const graphql =                 | 
-                                | 
-graphql                         | entity.name.function.tagged-template.js
-\`                               | punctuation.definition.string.template.begin.js
-                                | meta.embedded.block.graphql
-query                           | meta.embedded.block.graphql keyword.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-{                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-user                            | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
-(                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-id                              | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
-5                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
-"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
-,                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-name                            | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
- boolean                        | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
-)                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-{                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-something                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-}                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-}                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-\`                               | punctuation.definition.string.template.end.js
-;                               | 
-                                | 
-const queryWithInlineComment =  | 
-\`                               | taggedTemplates punctuation.definition.string.template.begin.js
-#graphql                        | taggedTemplates comment.line.graphql.js
-                                | taggedTemplates meta.embedded.block.graphql
-query                           | taggedTemplates meta.embedded.block.graphql keyword.operation.graphql
-                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
-{                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
-user                            | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
-(                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-id                              | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
-                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-"                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
-5                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
-"                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
-,                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
-                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-name                            | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
- boolean                        | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
-)                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-{                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-something                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
-                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-}                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
-}                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-\`                               | taggedTemplates punctuation.definition.string.template.end.js
-;                               | 
-                                | 
-const queryWithLeadingComment = | 
-                                | 
-/* GraphQL */                   | comment.graphql.js
-                                | 
-\`                               | punctuation.definition.string.template.begin.js
-                                | meta.embedded.block.graphql
-query                           | meta.embedded.block.graphql keyword.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-{                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-user                            | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
-(                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-id                              | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
-5                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
-"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
-,                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-name                            | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
- boolean                        | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
-)                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-{                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-something                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-}                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-}                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-\`                               | punctuation.definition.string.template.end.js
-;                               | 
-                                | 
+/* eslint-disable */                   | 
+/* prettier-ignore */                  | 
+// @ts-nocheck                         | 
+                                       | 
+const variable = 'test';               | 
+                                       | 
+gql                                    | entity.name.function.tagged-template.js
+\`                                      | punctuation.definition.string.template.begin.js
+                                       | meta.embedded.block.graphql
+query                                  | meta.embedded.block.graphql keyword.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+{                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+user                                   | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+(                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+id                                     | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+"                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
+5                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
+"                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
+,                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+name                                   | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+ boolean                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
+)                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+{                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+something                              | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+}                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+}                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+\`                                      | punctuation.definition.string.template.end.js
+;                                      | 
+                                       | 
+graphql                                | entity.name.function.tagged-template.js
+\`                                      | punctuation.definition.string.template.begin.js
+                                       | meta.embedded.block.graphql
+query                                  | meta.embedded.block.graphql keyword.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+{                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+user                                   | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+(                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+id                                     | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+"                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
+5                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
+"                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
+,                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+name                                   | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+ boolean                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
+)                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+{                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+something                              | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+}                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+}                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+\`                                      | punctuation.definition.string.template.end.js
+;                                      | 
+                                       | 
+const graphql =                        | 
+                                       | 
+graphql                                | entity.name.function.tagged-template.js
+\`                                      | punctuation.definition.string.template.begin.js
+                                       | meta.embedded.block.graphql
+query                                  | meta.embedded.block.graphql keyword.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+{                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+user                                   | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+(                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+id                                     | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+"                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
+5                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
+"                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
+,                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+name                                   | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+ $                                     | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+{                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.objectvalues.graphql meta.brace.curly.graphql
+variable                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.objectvalues.graphql constant.character.enum.graphql
+}                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.objectvalues.graphql meta.brace.curly.graphql
+)                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+{                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+something                              | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+}                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+}                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+\`                                      | punctuation.definition.string.template.end.js
+;                                      | 
+                                       | 
+const graphql =                        | 
+                                       | 
+graphql                                | entity.name.function.tagged-template.js
+(                                      | 
+\`                                      | punctuation.definition.string.template.begin.js
+                                       | meta.embedded.block.graphql
+query                                  | meta.embedded.block.graphql keyword.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+{                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+user                                   | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+(                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+id                                     | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+"                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
+5                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
+"                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
+,                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+name                                   | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+ $                                     | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+{                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.objectvalues.graphql meta.brace.curly.graphql
+variable                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.objectvalues.graphql constant.character.enum.graphql
+}                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.objectvalues.graphql meta.brace.curly.graphql
+)                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+{                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+something                              | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+}                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+}                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+\`                                      | punctuation.definition.string.template.end.js
+);                                     | 
+                                       | 
+const query =                          | 
+                                       | 
+/* GraphQL */                          | comment.graphql.js
+                                       | 
+'                                      | punctuation.definition.string.template.begin.js
+query                                  | meta.embedded.block.graphql keyword.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+{                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+id                                     | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+}                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | meta.embedded.block.graphql
+'                                      | punctuation.definition.string.template.end.js
+;                                      | 
+const query =                          | 
+                                       | 
+graphql                                | entity.name.function.tagged-template.js
+(                                      | 
+'                                      | punctuation.definition.string.template.begin.js
+query                                  | meta.embedded.block.graphql keyword.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+{                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+id                                     | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+}                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | meta.embedded.block.graphql
+'                                      | punctuation.definition.string.template.end.js
+);                                     | 
+                                       | 
+const queryWithInlineComment =         | 
+\`                                      | taggedTemplates punctuation.definition.string.template.begin.js
+#graphql                               | taggedTemplates comment.line.graphql.js
+                                       | taggedTemplates meta.embedded.block.graphql
+query                                  | taggedTemplates meta.embedded.block.graphql keyword.operation.graphql
+                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
+{                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
+user                                   | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+(                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+id                                     | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+"                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
+5                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
+"                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
+,                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
+                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+name                                   | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+ boolean                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
+)                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+{                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+something                              | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
+                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+}                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
+}                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+\`                                      | taggedTemplates punctuation.definition.string.template.end.js
+;                                      | 
+                                       | 
+const queryWithInlineComment =         | 
+'                                      | taggedTemplates punctuation.definition.string.template.begin.js
+#graphql                               | taggedTemplates comment.line.graphql.js
+                                       | taggedTemplates meta.embedded.block.graphql
+query                                  | taggedTemplates meta.embedded.block.graphql keyword.operation.graphql
+                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
+{                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
+id                                     | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
+}                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | taggedTemplates meta.embedded.block.graphql
+'                                      | taggedTemplates punctuation.definition.string.template.end.js
+;                                      | 
+                                       | 
+const queryWithInlineComment =         | 
+'                                      | taggedTemplates punctuation.definition.string.template.begin.js
+#graphql                               | taggedTemplates comment.line.graphql.js
+                                       | taggedTemplates meta.embedded.block.graphql
+query                                  | taggedTemplates meta.embedded.block.graphql keyword.operation.graphql
+                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
+{                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
+id                                     | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
+}                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | taggedTemplates meta.embedded.block.graphql
+'                                      | taggedTemplates punctuation.definition.string.template.end.js
+;                                      | 
+                                       | 
+const queryWithInlineComment =         | 
+\`                                      | taggedTemplates punctuation.definition.string.template.begin.js
+#graphql                               | taggedTemplates comment.line.graphql.js
+                                       | taggedTemplates meta.embedded.block.graphql
+query                                  | taggedTemplates meta.embedded.block.graphql keyword.operation.graphql
+                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
+{                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
+user                                   | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+(                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+id                                     | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+"                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
+5                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
+"                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
+,                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
+                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+name                                   | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+ boolean                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
+)                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+{                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+something                              | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
+                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+}                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
+}                                      | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+\`                                      | taggedTemplates punctuation.definition.string.template.end.js
+;                                      | 
+// TODO: fix this                      | 
+const queryWithInlineComment = \`       | 
+#graphql                               | 
+ query {                               | 
+        user(id: "5", name: boolean) { | 
+            something                  | 
+        }                              | 
+    }                                  | 
+\`;                                     | 
+                                       | 
+const queryWithLeadingComment =        | 
+                                       | 
+/* GraphQL */                          | comment.graphql.js
+                                       | 
+\`                                      | punctuation.definition.string.template.begin.js
+                                       | meta.embedded.block.graphql
+query                                  | meta.embedded.block.graphql keyword.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+{                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+user                                   | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+(                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+id                                     | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+"                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
+5                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
+"                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
+,                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+name                                   | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+ boolean                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
+)                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+{                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+something                              | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+}                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                       | meta.embedded.block.graphql meta.selectionset.graphql
+}                                      | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+\`                                      | punctuation.definition.string.template.end.js
+;                                      | 
+                                       | 
+// TODO: fix this                      | 
+const queryWithLeadingAboveComment =   | 
+  /* GraphQL */                        | 
+  \`                                    | 
+    query {                            | 
+      user(id: "5", name: boolean) {   | 
+        something                      | 
+      }                                | 
+    }                                  | 
+  \`;                                   | 
+                                       | 
 `;
 
 exports[`inline.graphql grammar > should tokenize a simple svelte file 1`] = `
@@ -198,177 +356,180 @@ hello                  | meta.embedded.block.graphql meta.selectionset.graphql v
 `;
 
 exports[`inline.graphql grammar > should tokenize a simple typescript file 1`] = `
-/* eslint-disable */            | 
-// @ts-nocheck                  | 
-                                | 
-gql                             | entity.name.function.tagged-template.js
-\`                               | punctuation.definition.string.template.begin.js
-                                | meta.embedded.block.graphql
-query                           | meta.embedded.block.graphql keyword.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-{                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-user                            | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
-(                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-id                              | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
-5                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
-"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
-,                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-name                            | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
- boolean                        | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
-)                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-{                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-something                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-}                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-}                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-\`                               | punctuation.definition.string.template.end.js
-;                               | 
-                                | 
-graphql                         | entity.name.function.tagged-template.js
-<SomeGeneric>                   | 
-\`                               | punctuation.definition.string.template.begin.js
-                                | meta.embedded.block.graphql
-query                           | meta.embedded.block.graphql keyword.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-{                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-user                            | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
-(                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-id                              | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
-5                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
-"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
-,                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-name                            | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
- boolean                        | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
-)                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-{                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-something                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-}                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-}                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-\`                               | punctuation.definition.string.template.end.js
-;                               | 
-                                | 
-const graphql =                 | 
-                                | 
-graphql                         | entity.name.function.tagged-template.js
-<SomeGeneric>                   | 
-\`                               | punctuation.definition.string.template.begin.js
-                                | meta.embedded.block.graphql
-query                           | meta.embedded.block.graphql keyword.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-{                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-user                            | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
-(                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-id                              | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
-5                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
-"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
-,                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-name                            | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
- boolean                        | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
-)                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-{                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-something                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-}                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-}                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-\`                               | punctuation.definition.string.template.end.js
-;                               | 
-                                | 
-const queryWithInlineComment =  | 
-\`                               | taggedTemplates punctuation.definition.string.template.begin.js
-#graphql                        | taggedTemplates comment.line.graphql.js
-                                | taggedTemplates meta.embedded.block.graphql
-query                           | taggedTemplates meta.embedded.block.graphql keyword.operation.graphql
-                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
-{                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
-user                            | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
-(                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-id                              | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
-                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-"                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
-5                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
-"                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
-,                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
-                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-name                            | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
- boolean                        | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
-)                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-{                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-something                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
-                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-}                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
-}                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-\`                               | taggedTemplates punctuation.definition.string.template.end.js
-;                               | 
-                                | 
-const queryWithLeadingComment = | 
-                                | 
-/* GraphQL */                   | comment.graphql.js
-                                | 
-\`                               | punctuation.definition.string.template.begin.js
-                                | meta.embedded.block.graphql
-query                           | meta.embedded.block.graphql keyword.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-{                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-user                            | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
-(                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-id                              | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
-5                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
-"                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
-,                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
-name                            | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
-:                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
- boolean                        | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
-)                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-{                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-something                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-}                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                | meta.embedded.block.graphql meta.selectionset.graphql
-}                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-\`                               | punctuation.definition.string.template.end.js
-;                               | 
-                                | 
+/* eslint-disable */                            | 
+// @ts-nocheck                                  | 
+                                                | 
+gql                                             | entity.name.function.tagged-template.js
+\`                                               | punctuation.definition.string.template.begin.js
+                                                | meta.embedded.block.graphql
+query                                           | meta.embedded.block.graphql keyword.operation.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql
+{                                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql
+user                                            | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+(                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+id                                              | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+"                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
+5                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
+"                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
+,                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+name                                            | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+ boolean                                        | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
+)                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+{                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+something                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+}                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql
+}                                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+\`                                               | punctuation.definition.string.template.end.js
+;                                               | 
+                                                | 
+graphql                                         | entity.name.function.tagged-template.js
+<SomeGeneric>                                   | 
+\`                                               | punctuation.definition.string.template.begin.js
+                                                | meta.embedded.block.graphql
+query                                           | meta.embedded.block.graphql keyword.operation.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql
+{                                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql
+user                                            | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+(                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+id                                              | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+"                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
+5                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
+"                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
+,                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+name                                            | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+ boolean                                        | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
+)                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+{                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+something                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+}                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql
+}                                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+\`                                               | punctuation.definition.string.template.end.js
+;                                               | 
+                                                | 
+const query =                                   | 
+                                                | 
+graphql                                         | entity.name.function.tagged-template.js
+<SomeGeneric>                                   | 
+\`                                               | punctuation.definition.string.template.begin.js
+                                                | meta.embedded.block.graphql
+query                                           | meta.embedded.block.graphql keyword.operation.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql
+{                                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql
+user                                            | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+(                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+id                                              | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+"                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
+5                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
+"                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
+,                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+name                                            | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+ boolean                                        | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
+)                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+{                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+something                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+}                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql
+}                                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+\`                                               | punctuation.definition.string.template.end.js
+;                                               | 
+                                                | 
+// TODO: Fix this                               | 
+const query = graphql<Generic>('query { id }'); | 
+                                                | 
+const queryWithInlineComment =                  | 
+\`                                               | taggedTemplates punctuation.definition.string.template.begin.js
+#graphql                                        | taggedTemplates comment.line.graphql.js
+                                                | taggedTemplates meta.embedded.block.graphql
+query                                           | taggedTemplates meta.embedded.block.graphql keyword.operation.graphql
+                                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
+{                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
+user                                            | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+(                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+id                                              | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+                                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+"                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
+5                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
+"                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
+,                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
+                                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+name                                            | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+ boolean                                        | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
+)                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+                                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+{                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+something                                       | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
+                                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+}                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
+}                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+\`                                               | taggedTemplates punctuation.definition.string.template.end.js
+;                                               | 
+                                                | 
+const queryWithLeadingComment =                 | 
+                                                | 
+/* GraphQL */                                   | comment.graphql.js
+                                                | 
+\`                                               | punctuation.definition.string.template.begin.js
+                                                | meta.embedded.block.graphql
+query                                           | meta.embedded.block.graphql keyword.operation.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql
+{                                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql
+user                                            | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+(                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+id                                              | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+"                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
+5                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
+"                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
+,                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.comma.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+name                                            | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+ boolean                                        | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
+)                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+{                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+something                                       | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+}                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                                | meta.embedded.block.graphql meta.selectionset.graphql
+}                                               | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+\`                                               | punctuation.definition.string.template.end.js
+;                                               | 
+                                                | 
 `;
 
 exports[`inline.graphql grammar > should tokenize a simple vue sfc comp file 1`] = `
diff --git a/packages/vscode-graphql-syntax/tests/__snapshots__/markdown-grammar.spec.ts.snap b/packages/vscode-graphql-syntax/tests/__snapshots__/markdown-grammar.spec.ts.snap
new file mode 100644
index 00000000000..cb1a88a0b80
--- /dev/null
+++ b/packages/vscode-graphql-syntax/tests/__snapshots__/markdown-grammar.spec.ts.snap
@@ -0,0 +1,151 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`inline.graphql.markdown.codeblock grammar > should tokenize a simple markdown file 1`] = `
+# this is an MD file                                                          | 
+                                                                              | 
+It would be a shame if the word \`graphql\` accidentally triggered highlighting | 
+Looks like it doesn't though! good                                            | 
+                                                                              | 
+\`\`\`                                                                           | markup.fenced_code.block.markdown punctuation.definition.markdown
+graphql                                                                       | markup.fenced_code.block.markdown fenced_code.block.language.markdown
+query                                                                         | markup.fenced_code.block.markdown meta.embedded.block.graphql keyword.operation.graphql
+                                                                              | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql
+{                                                                             | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                                                              | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql
+something                                                                     | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+}                                                                             | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+\`\`\`                                                                           | markup.fenced_code.block.markdown punctuation.definition.markdown
+                                                                              | 
+\`\`\`                                                                           | markup.fenced_code.block.markdown punctuation.definition.markdown
+gql                                                                           | markup.fenced_code.block.markdown fenced_code.block.language.markdown
+# comment                                                                     | markup.fenced_code.block.markdown meta.embedded.block.graphql comment.line.graphql.js
+query                                                                         | markup.fenced_code.block.markdown meta.embedded.block.graphql keyword.operation.graphql
+                                                                              | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql
+{                                                                             | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                                                              | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql
+something                                                                     | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+}                                                                             | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+\`\`\`                                                                           | markup.fenced_code.block.markdown punctuation.definition.markdown
+                                                                              | 
+\`\`\`                                                                           | markup.fenced_code.block.markdown punctuation.definition.markdown
+GraphQL                                                                       | markup.fenced_code.block.markdown fenced_code.block.language.markdown
+query                                                                         | markup.fenced_code.block.markdown meta.embedded.block.graphql keyword.operation.graphql
+                                                                              | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql
+{                                                                             | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                                                              | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql
+something                                                                     | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+                                                                              | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql
+@directive                                                                    | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql entity.name.function.directive.graphql
+(                                                                             | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+first                                                                         | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                                                             | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+                                                                              | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+"                                                                             | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.begin.graphql
+string                                                                        | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql
+"                                                                             | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql string.quoted.double.graphql punctuation.definition.string.end.graphql
+)                                                                             | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+}                                                                             | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                                                              | markup.fenced_code.block.markdown meta.embedded.block.graphql
+type                                                                          | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.type.interface.graphql keyword.type.graphql
+                                                                              | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.type.interface.graphql
+Example                                                                       | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.type.interface.graphql support.type.graphql
+                                                                              | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.type.interface.graphql meta.type.object.graphql
+{                                                                             | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.type.interface.graphql meta.type.object.graphql punctuation.operation.graphql
+    something                                                                 | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.type.interface.graphql meta.type.object.graphql
+}                                                                             | markup.fenced_code.block.markdown meta.embedded.block.graphql meta.type.interface.graphql meta.type.object.graphql punctuation.operation.graphql
+\`\`\`                                                                           | markup.fenced_code.block.markdown punctuation.definition.markdown
+                                                                              | 
+\`\`\`php                                                                        | 
+<?php                                                                         | 
+  $query = <<<GRAPHQL                                                         | 
+    query {                                                                   | 
+      site {                                                                  | 
+        name                                                                  | 
+      }                                                                       | 
+    }                                                                         | 
+  GRAPHQL;                                                                    | 
+?>                                                                            | 
+\`\`\`                                                                           | 
+                                                                              | 
+\`\`\`ruby                                                                       | 
+ it "Should delimit queries" do                                               | 
+    query3 = <<~'GRAPHQL'                                                     | 
+    {                                                                         | 
+        datasets(q: { idEq: 3 }) { id, daylight }                             | 
+    }                                                                         | 
+    GRAPHQL                                                                   | 
+end                                                                           | 
+                                                                              | 
+\`\`\`                                                                           | 
+                                                                              | 
+`;
+
+exports[`inline.graphql.markdown.codeblock grammar js > should tokenize a markdown file with javascript & typescript 1`] = `
+# TODO: get tags inside of other code blocks working | 
+                                                     | 
+\`\`\`js                                                | 
+const variable = 1;                                  | 
+                                                     | 
+const query = graphql\`                               | 
+  query {                                            | 
+    something(arg: \${variable})                      | 
+  }                                                  | 
+\`;                                                   | 
+const Component = () => {                            | 
+  return <div>{query}</div>;                         | 
+};                                                   | 
+\`\`\`                                                  | 
+                                                     | 
+\`\`\`ts                                                | 
+const variable: number = 1;                          | 
+                                                     | 
+graphql\`                                             | 
+    query {                                          | 
+        something(variable: \${variable})             | 
+    }                                                | 
+\`;                                                   | 
+const Component = () => {                            | 
+  return <div> </div>;                               | 
+};                                                   | 
+\`\`\`                                                  | 
+                                                     | 
+### svelte                                           | 
+                                                     | 
+\`\`\`svelte                                            | 
+<script>                                             | 
+    const query = gql\`                               | 
+    query {                                          | 
+        hello                                        | 
+    }                                                | 
+    \`;                                               | 
+	let name = 'world';                                 | 
+    const query = \`\`                                 | 
+</script>                                            | 
+                                                     | 
+<h1>Hello {name}!</h1>                               | 
+\`\`\`                                                  | 
+                                                     | 
+## vue                                               | 
+                                                     | 
+\`\`\`vue                                               | 
+<script>                                             | 
+const query = gql\`                                   | 
+  query {                                            | 
+    hello                                            | 
+  }                                                  | 
+\`;                                                   | 
+export default {                                     | 
+  data() {                                           | 
+    return {                                         | 
+      message: 'Hello World!',                       | 
+    };                                               | 
+  },                                                 | 
+};                                                   | 
+</script>                                            | 
+                                                     | 
+<template>                                           | 
+  <h1>{{ message }}</h1>                             | 
+</template>                                          | 
+\`\`\`                                                  | 
+                                                     | 
+`;
diff --git a/packages/vscode-graphql-syntax/tests/__snapshots__/php-grammar.spec.ts.snap b/packages/vscode-graphql-syntax/tests/__snapshots__/php-grammar.spec.ts.snap
index 85bd887c13e..8475bda8ede 100644
--- a/packages/vscode-graphql-syntax/tests/__snapshots__/php-grammar.spec.ts.snap
+++ b/packages/vscode-graphql-syntax/tests/__snapshots__/php-grammar.spec.ts.snap
@@ -1,45 +1,57 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`inline.graphql.php grammar > should tokenize a simple php file 1`] = `
-<!-- these seem horribly regressed. please someone fix this grammar! --> | 
-                                                                         | 
-$query =                                                                 | 
-<<<                                                                      | punctuation.section.embedded.begin.php punctuation.definition.string.php
-GRAPHQL                                                                  | punctuation.section.embedded.begin.php keyword.operator.heredoc.php
-                                                                         | meta.embedded.block.graphql
-query                                                                    | meta.embedded.block.graphql keyword.operation.graphql
-                                                                         | meta.embedded.block.graphql meta.selectionset.graphql
-{                                                                        | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                                                         | meta.embedded.block.graphql meta.selectionset.graphql
-site                                                                     | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
-                                                                         | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-{                                                                        | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                                                         | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-name                                                                     | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
-                                                                         | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
-}                                                                        | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
-                                                                         | meta.embedded.block.graphql meta.selectionset.graphql
-}                                                                        | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
-GRAPHQL                                                                  | punctuation.section.embedded.end.php keyword.operator.heredoc.php
-;                                                                        | 
-                                                                         | 
-$gql = <<<QUERY                                                          | 
-query {                                                                  | 
-    pokemon(name: "Pikachu") {                                           | 
-        id                                                               | 
-        number                                                           | 
-        name                                                             | 
-        attacks {                                                        | 
-            special {                                                    | 
-                name                                                     | 
-                type                                                     | 
-                damage                                                   | 
-            }                                                            | 
-        }                                                                | 
-    }                                                                    | 
-}                                                                        | 
-QUERY;                                                                   | 
-                                                                         | 
-                                                                         | 
-                                                                         | 
+<?php                          | 
+                               | 
+## TODO: not yet supported     | 
+$graphql = graphql([           | 
+    'query' => "{              | 
+  post(idType: SLUG, id: 2) {  | 
+    title                      | 
+    content                    | 
+    date                       | 
+  }                            | 
+}"                             | 
+]);                            | 
+                               | 
+$query =                       | 
+<<<                            | punctuation.section.embedded.begin.php punctuation.definition.string.php
+GRAPHQL                        | punctuation.section.embedded.begin.php keyword.operator.heredoc.php
+                               | meta.embedded.block.graphql
+query                          | meta.embedded.block.graphql keyword.operation.graphql
+                               | meta.embedded.block.graphql meta.selectionset.graphql
+{                              | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                               | meta.embedded.block.graphql meta.selectionset.graphql
+site                           | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+{                              | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+name                           | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
+                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+}                              | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                               | meta.embedded.block.graphql meta.selectionset.graphql
+}                              | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+GRAPHQL                        | punctuation.section.embedded.end.php keyword.operator.heredoc.php
+;                              | 
+                               | 
+## TODO: not yet supported     | 
+$gql = <<<QUERY                | 
+query {                        | 
+    pokemon(name: "Pikachu") { | 
+        id                     | 
+        number                 | 
+        name                   | 
+        attacks {              | 
+            special {          | 
+                name           | 
+                type           | 
+                damage         | 
+            }                  | 
+        }                      | 
+    }                          | 
+}                              | 
+QUERY;                         | 
+                               | 
+?>                             | 
+                               | 
 `;
diff --git a/packages/vscode-graphql-syntax/tests/__snapshots__/reason-grammar.spec.ts.snap b/packages/vscode-graphql-syntax/tests/__snapshots__/reason-grammar.spec.ts.snap
new file mode 100644
index 00000000000..819a9d2ad99
--- /dev/null
+++ b/packages/vscode-graphql-syntax/tests/__snapshots__/reason-grammar.spec.ts.snap
@@ -0,0 +1,35 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`inline.graphql.reason grammar > should tokenize a simple reasonML file 1`] = `
+module VideoGames =                                            | 
+[%graphql                                                      | 
+  {|                                                           | meta.embedded.block.graphql
+                                                               | meta.embedded.block.graphql
+query                                                          | meta.embedded.block.graphql keyword.operation.graphql
+                                                               | meta.embedded.block.graphql
+VideoGames                                                     | meta.embedded.block.graphql entity.name.function.graphql
+                                                               | meta.embedded.block.graphql meta.selectionset.graphql
+{                                                              | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                                               | meta.embedded.block.graphql meta.selectionset.graphql
+videoGames                                                     | meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+                                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+{                                                              | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+id                                                             | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
+                                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+title                                                          | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
+                                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+developer                                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
+                                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+completed                                                      | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql variable.graphql
+                                                               | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql
+}                                                              | meta.embedded.block.graphql meta.selectionset.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                                               | meta.embedded.block.graphql meta.selectionset.graphql
+}                                                              | meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+|}                                                             | meta.embedded.block.graphql
+]                                                              | meta.embedded.block.graphql
+;                                                              | 
+                                                               | 
+module VideoGamesQuery = ReasonApollo.CreateQuery(VideoGames); | 
+                                                               | 
+`;
diff --git a/packages/vscode-graphql-syntax/tests/__snapshots__/ruby-grammar.spec.ts.snap b/packages/vscode-graphql-syntax/tests/__snapshots__/ruby-grammar.spec.ts.snap
new file mode 100644
index 00000000000..cec18750b24
--- /dev/null
+++ b/packages/vscode-graphql-syntax/tests/__snapshots__/ruby-grammar.spec.ts.snap
@@ -0,0 +1,47 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`inline.graphql.rb grammar > should tokenize a simple ruby file 1`] = `
+it "Should find datasets by ransack" do                            | 
+    dataset = Dataset.last                                         | 
+    query =                                                        | 
+<<~                                                                | taggedTemplates meta.embedded.block.graphql
+GRAPHQL                                                            | taggedTemplates punctuation.definition.string.end.ruby
+    {                                                              | 
+        datasets(q: { idEq: 3 }) { id, daylight }                  | 
+    }                                                              | 
+    GRAPHQL                                                        | 
+    data = Util.graphql_query(query)                               | 
+    expect(data['datasets'][0]["daylight"]).to eq dataset.daylight | 
+                                                                   | 
+    query2 =                                                       | 
+<<-                                                                | taggedTemplates meta.embedded.block.graphql
+GRAPHQL                                                            | taggedTemplates punctuation.definition.string.end.ruby
+    {                                                              | 
+        datasets(q: { idEq: #{dataset.id} }) { id, daylight }      | 
+    }                                                              | 
+    GRAPHQL                                                        | 
+                                                                   | 
+    query3 =                                                       | 
+<<~'                                                               | taggedTemplates meta.embedded.block.graphql
+GRAPHQL                                                            | taggedTemplates meta.embedded.block.graphql entity.name.function.graphql
+'                                                                  | taggedTemplates meta.embedded.block.graphql
+                                                                   | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
+{                                                                  | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql punctuation.operation.graphql
+                                                                   | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql
+datasets                                                           | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql variable.graphql
+(                                                                  | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.brace.round.directive.graphql
+q                                                                  | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql variable.parameter.graphql
+:                                                                  | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql punctuation.colon.graphql
+                                                                   | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.objectvalues.graphql
+{                                                                  | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.objectvalues.graphql meta.brace.curly.graphql
+                                                                   | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.objectvalues.graphql
+idEq                                                               | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.objectvalues.graphql constant.object.key.graphql string.unquoted.graphql
+:                                                                  | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.objectvalues.graphql punctuation.graphql
+                                                                   | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.objectvalues.graphql comment.line.graphql.js punctuation.whitespace.comment.leading.graphql
+#{dataset.id} }) { id, daylight }                                  | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.objectvalues.graphql comment.line.graphql.js
+                                                                   | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.objectvalues.graphql
+}                                                                  | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql meta.objectvalues.graphql meta.brace.curly.graphql
+    GRAPHQL                                                        | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
+end                                                                | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql constant.character.enum.graphql
+                                                                   | taggedTemplates meta.embedded.block.graphql meta.selectionset.graphql meta.arguments.graphql
+`;
diff --git a/packages/vscode-graphql-syntax/tests/markdown-grammar.spec.ts b/packages/vscode-graphql-syntax/tests/markdown-grammar.spec.ts
new file mode 100644
index 00000000000..8de3f783670
--- /dev/null
+++ b/packages/vscode-graphql-syntax/tests/markdown-grammar.spec.ts
@@ -0,0 +1,19 @@
+import { tokenizeFile } from './__utilities__/utilities';
+
+describe('inline.graphql.markdown.codeblock grammar', () => {
+  const scope = 'inline.graphql.markdown.codeblock';
+
+  it('should tokenize a simple markdown file', async () => {
+    const result = await tokenizeFile('__fixtures__/test.md', scope);
+    expect(result).toMatchSnapshot();
+  });
+});
+
+describe('inline.graphql.markdown.codeblock grammar js', () => {
+  const scope = 'inline.graphql.markdown.codeblock';
+
+  it('should tokenize a markdown file with javascript & typescript', async () => {
+    const result = await tokenizeFile('__fixtures__/test-js.md', scope);
+    expect(result).toMatchSnapshot();
+  });
+});
diff --git a/packages/vscode-graphql-syntax/tests/reason-grammar.spec.ts b/packages/vscode-graphql-syntax/tests/reason-grammar.spec.ts
new file mode 100644
index 00000000000..7e1203707cb
--- /dev/null
+++ b/packages/vscode-graphql-syntax/tests/reason-grammar.spec.ts
@@ -0,0 +1,10 @@
+import { tokenizeFile } from './__utilities__/utilities';
+
+describe('inline.graphql.reason grammar', () => {
+  const scope = 'inline.graphql.re';
+
+  it('should tokenize a simple reasonML file', async () => {
+    const result = await tokenizeFile('__fixtures__/test.re', scope);
+    expect(result).toMatchSnapshot();
+  });
+});
diff --git a/packages/vscode-graphql-syntax/tests/ruby-grammar.spec.ts b/packages/vscode-graphql-syntax/tests/ruby-grammar.spec.ts
new file mode 100644
index 00000000000..fab8853e748
--- /dev/null
+++ b/packages/vscode-graphql-syntax/tests/ruby-grammar.spec.ts
@@ -0,0 +1,10 @@
+import { tokenizeFile } from './__utilities__/utilities';
+
+describe('inline.graphql.rb grammar', () => {
+  const scope = 'inline.graphql.rb';
+
+  it('should tokenize a simple ruby file', async () => {
+    const result = await tokenizeFile('__fixtures__/test.rb', scope);
+    expect(result).toMatchSnapshot();
+  });
+});
diff --git a/packages/vscode-graphql/src/extension.ts b/packages/vscode-graphql/src/extension.ts
index 3e3c2e1369a..5f6a65ad8b9 100644
--- a/packages/vscode-graphql/src/extension.ts
+++ b/packages/vscode-graphql/src/extension.ts
@@ -58,6 +58,7 @@ export async function activate(context: ExtensionContext) {
       { scheme: 'file', language: 'typescript' },
       { scheme: 'file', language: 'typescriptreact' },
       { scheme: 'file', language: 'vue' },
+      { scheme: 'file', language: 'vue-html' },
       { scheme: 'file', language: 'svelte' },
     ],
     synchronize: {
diff --git a/resources/tsconfig.base.cjs.json b/resources/tsconfig.base.cjs.json
index bf3c267caa4..400d0a9460f 100644
--- a/resources/tsconfig.base.cjs.json
+++ b/resources/tsconfig.base.cjs.json
@@ -20,7 +20,7 @@
     "noUnusedLocals": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-    "lib": ["dom", "es2017", "es2018", "esnext"],
+    "lib": ["dom", "es2017", "es2018", "es2021", "esnext"],
     "types": ["node", "jest"],
     "baseUrl": "."
   },