enh(js/ts) Support GraphQL tagged template strings (#3713)

highlightjs · Feb 11, 2023 · 91e1898 · 91e1898
1 parent dacfacb
commit 91e1898
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 5 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,21 +1,21 @@
-## Version 11.9.0
+## Version 11.8.0
 
 New Grammars:
 
 - added 3rd party Lang grammar to SUPPORTED_LANGUAGES [AdamRaichu][]
 
-[AdamRaichu]: https://github.com/AdamRaichu
-
-## Version 11.8.0
-
 Grammars:
 
+- enh(js/ts) Added support for GraphQL tagged template strings [Ali Ukani][]
 - enh(javascript) add sessionStorage to list of built-in variables [Jeroen van Vianen][]
 - enh(http) Add support for HTTP/3 [Rijenkii][]
 
+[AdamRaichu]: https://github.com/AdamRaichu
+[Ali Ukani]: https://github.com/ali
 [Jeroen van Vianen]: https://github.com/morinel
 [Rijenkii]: https://github.com/rijenkii
 
+
 ## Version 11.7.0
 
 New Grammars:

diff --git a/src/languages/javascript.js b/src/languages/javascript.js
@@ -158,6 +158,19 @@ export default function(hljs) {
       subLanguage: 'css'
     }
   };
+  const GRAPHQL_TEMPLATE = {
+    begin: 'gql`',
+    end: '',
+    starts: {
+      end: '`',
+      returnEnd: false,
+      contains: [
+        hljs.BACKSLASH_ESCAPE,
+        SUBST
+      ],
+      subLanguage: 'graphql'
+    }
+  };
   const TEMPLATE_STRING = {
     className: 'string',
     begin: '`',
@@ -219,6 +232,7 @@ export default function(hljs) {
     hljs.QUOTE_STRING_MODE,
     HTML_TEMPLATE,
     CSS_TEMPLATE,
+    GRAPHQL_TEMPLATE,
     TEMPLATE_STRING,
     // Skip numbers when they are part of a variable name
     { match: /\$\d+/ },
@@ -453,6 +467,7 @@ export default function(hljs) {
       hljs.QUOTE_STRING_MODE,
       HTML_TEMPLATE,
       CSS_TEMPLATE,
+      GRAPHQL_TEMPLATE,
       TEMPLATE_STRING,
       COMMENT,
       // Skip numbers when they are part of a variable name

diff --git a/test/markup/javascript/inline-languages.expect.txt b/test/markup/javascript/inline-languages.expect.txt
@@ -20,5 +20,15 @@ css`<span class="language-css">
   }
 `</span>;
 
+gql`<span class="language-graphql"><span class="hljs-keyword">query</span> <span class="hljs-punctuation">{</span> viewer <span class="hljs-punctuation">{</span> id <span class="hljs-punctuation">}</span> <span class="hljs-punctuation">}</span>`</span>;
+
+gql`<span class="language-graphql">
+  <span class="hljs-keyword">type</span> Project <span class="hljs-punctuation">{</span>
+    <span class="hljs-symbol">name</span><span class="hljs-punctuation">:</span> String
+    <span class="hljs-symbol">tagline</span><span class="hljs-punctuation">:</span> String
+    <span class="hljs-symbol">contributors</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>User<span class="hljs-punctuation">]</span>
+  <span class="hljs-punctuation">}</span>
+`</span>;
+
 <span class="hljs-comment">// Ensure that we&#x27;re back in JavaScript mode.</span>
 <span class="hljs-keyword">var</span> foo = <span class="hljs-number">10</span>;
diff --git a/test/markup/javascript/inline-languages.txt b/test/markup/javascript/inline-languages.txt
@@ -20,5 +20,15 @@ css`
   }
 `;
 
+gql`query { viewer { id } }`;
+
+gql`
+  type Project {
+    name: String
+    tagline: String
+    contributors: [User]
+  }
+`;
+
 // Ensure that we're back in JavaScript mode.
 var foo = 10;
diff --git a/test/markup/typescript/inline-languages.expect.txt b/test/markup/typescript/inline-languages.expect.txt
@@ -20,5 +20,15 @@ css`<span class="language-css">
   }
 `</span>;
 
+gql`<span class="language-graphql"><span class="hljs-keyword">query</span> <span class="hljs-punctuation">{</span> viewer <span class="hljs-punctuation">{</span> id <span class="hljs-punctuation">}</span> <span class="hljs-punctuation">}</span>`</span>;
+
+gql`<span class="language-graphql">
+  <span class="hljs-keyword">type</span> Project <span class="hljs-punctuation">{</span>
+    <span class="hljs-symbol">name</span><span class="hljs-punctuation">:</span> String
+    <span class="hljs-symbol">tagline</span><span class="hljs-punctuation">:</span> String
+    <span class="hljs-symbol">contributors</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>User<span class="hljs-punctuation">]</span>
+  <span class="hljs-punctuation">}</span>
+`</span>;
+
 <span class="hljs-comment">// Ensure that we&#x27;re back in TypeScript mode.</span>
 <span class="hljs-keyword">var</span> foo = <span class="hljs-number">10</span>;
diff --git a/test/markup/typescript/inline-languages.txt b/test/markup/typescript/inline-languages.txt
@@ -20,5 +20,15 @@ css`
   }
 `;
 
+gql`query { viewer { id } }`;
+
+gql`
+  type Project {
+    name: String
+    tagline: String
+    contributors: [User]
+  }
+`;
+
 // Ensure that we're back in TypeScript mode.
 var foo = 10;