Support highlighting GraphQL tagged template strings in JS/TS code

CHANGES.md

@@ -4,7 +4,12 @@ New Grammars:
 
 - added 3rd party Lang grammar to SUPPORTED_LANGUAGES [AdamRaichu][]
 
+Grammars:
+
+- Added support for highlighting GraphQL tagged template strings in JS/TS code [Ali Ukani][]
+
 [AdamRaichu]: https://github.com/AdamRaichu
+[Ali Ukani]: https://github.com/ali
 
 ## Version 11.8.0
 

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

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>;

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;

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>;

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;