Merge pull request #12385 from brendanrygus/ds/syntax-highlighter-gql

Components: Add graphql support to SyntaxHighlighter
storybookjs · Sep 10, 2020 · 586b08e · 586b08e
2 parents 3f6d7b9 + 3365a09
commit 586b08e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git 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
@@ -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 }), {})