GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 22:21:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Components: Add graphql support to SyntaxHighlighter
This commit is contained in:
Michael Shilman 2020-09-10 23:27:13 +08:00 committed by GitHub
commit 586b08ec8c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
lib/components/src/syntaxhighlighter/syntaxhighlighter.stories.tsx
View File

@ -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>
{`

2
lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
View File

@ -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 }), {})