diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx b/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
index 7824cd5da7dd..4ff7cffbc6c8 100644
--- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
+++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
@@ -82,6 +82,19 @@ storiesOf('Basics/SyntaxHighlighter', module)
       `}
     </SyntaxHighlighter>
   ))
+  .add('graphql', () => (
+    <SyntaxHighlighter language="graphql" copyable={false}>
+      {`query HeroNameAndFriends($episode: Episode) {
+          hero(episode: $episode) {
+            name
+            friends {
+              name
+            }
+          }
+        }
+      `}
+    </SyntaxHighlighter>
+  ))
   .add('unsupported', () => (
     <SyntaxHighlighter language="C#" bordered copyable>
       {`
diff --git a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
index 1303a74846b9..5ec021b11f8a 100644
--- a/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
+++ b/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
@@ -8,6 +8,7 @@ import jsx from 'react-syntax-highlighter/dist/cjs/languages/prism/jsx';
 import bash from 'react-syntax-highlighter/dist/cjs/languages/prism/bash';
 import css from 'react-syntax-highlighter/dist/cjs/languages/prism/css';
 import json from 'react-syntax-highlighter/dist/cjs/languages/prism/json';
+import graphql from 'react-syntax-highlighter/dist/cjs/languages/prism/graphql';
 import html from 'react-syntax-highlighter/dist/cjs/languages/prism/markup';
 import md from 'react-syntax-highlighter/dist/cjs/languages/prism/markdown';
 import yml from 'react-syntax-highlighter/dist/cjs/languages/prism/yaml';
@@ -33,6 +34,7 @@ ReactSyntaxHighlighter.registerLanguage('css', css);
 ReactSyntaxHighlighter.registerLanguage('html', html);
 ReactSyntaxHighlighter.registerLanguage('tsx', tsx);
 ReactSyntaxHighlighter.registerLanguage('typescript', typescript);
+ReactSyntaxHighlighter.registerLanguage('graphql', graphql);
 
 const themedSyntax = memoize(2)((theme) =>
   Object.entries(theme.code || {}).reduce((acc, [key, val]) => ({ ...acc, [`* .${key}`]: val }), {})