extract and merge Code component

Merges "Code" component from within MDXComponents to recently added UI/docs/Code.tsx, merging and cleaning up conflicts.

Moves all syntax highlighter logic to this component.
pull/26459/head^2
Paul Wackerow 2 years ago
parent 575b1b507b
commit f09d02aecd
No known key found for this signature in database
GPG Key ID: BB63E296FE9CAB8D
  1. 65
      src/components/MDXComponents.tsx
  2. 82
      src/components/UI/docs/Code.tsx

@ -1,72 +1,11 @@
import { Flex, Heading, Link, Stack, Table, Text, useColorMode } from '@chakra-ui/react';
import { Flex, Heading, Link, Stack, Table, Text } from '@chakra-ui/react';
import NextLink from 'next/link';
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import { nightOwl, prism } from 'react-syntax-highlighter/dist/cjs/styles/prism';
// import { Code } from './UI/docs'
import bash from 'react-syntax-highlighter/dist/cjs/languages/prism/bash';
import go from 'react-syntax-highlighter/dist/cjs/languages/prism/go';
import graphql from 'react-syntax-highlighter/dist/cjs/languages/prism/graphql';
import java from 'react-syntax-highlighter/dist/cjs/languages/prism/java';
import javascript from 'react-syntax-highlighter/dist/cjs/languages/prism/javascript';
import json from 'react-syntax-highlighter/dist/cjs/languages/prism/json';
import python from 'react-syntax-highlighter/dist/cjs/languages/prism/python';
import sh from 'react-syntax-highlighter/dist/cjs/languages/prism/shell-session';
import solidity from 'react-syntax-highlighter/dist/cjs/languages/prism/solidity';
import swift from 'react-syntax-highlighter/dist/cjs/languages/prism/swift';
import { Code } from './UI/docs'
import { textStyles } from '../theme/foundations';
import { getProgrammingLanguageName } from '../utils';
// syntax highlighting languages supported
SyntaxHighlighter.registerLanguage('bash', bash);
SyntaxHighlighter.registerLanguage('terminal', bash);
SyntaxHighlighter.registerLanguage('go', go);
SyntaxHighlighter.registerLanguage('graphql', graphql);
SyntaxHighlighter.registerLanguage('java', java);
SyntaxHighlighter.registerLanguage('javascript', javascript);
SyntaxHighlighter.registerLanguage('json', json);
SyntaxHighlighter.registerLanguage('python', python);
SyntaxHighlighter.registerLanguage('sh', sh);
SyntaxHighlighter.registerLanguage('solidity', solidity);
SyntaxHighlighter.registerLanguage('swift', swift);
const { header1, header2, header3, header4 } = textStyles;
const Code = ({ className, children, ...code }: any) => {
const { colorMode } = useColorMode();
const isDark = colorMode === 'dark';
const isTerminal = className?.includes('terminal') ;
if (code.inline)
return (
<Text
as='span'
padding='0.125em 0.25em'
color='primary'
background='code-bg'
borderRadius='0.25em'
fontFamily='code'
fontSize='sm'
overflowY='scroll'
>
{children[0]}
</Text>
);
if (className?.startsWith('language-')) {
return (
<SyntaxHighlighter
language={getProgrammingLanguageName(className)}
style={isTerminal || isDark ? nightOwl : prism} // TODO: Update with code light/dark color themes
customStyle={{ borderRadius: '0.5rem', padding: '1rem' }}
>
{children}
</SyntaxHighlighter>
);
}
return <Stack>{children[0]}</Stack>;
};
const MDXComponents = {
// paragraphs
p: ({ children }: any) => {

@ -1,38 +1,82 @@
// Libraries
import { Code as ChakraCode, Stack, Text } from '@chakra-ui/react';
import { FC } from 'react';
import { Code as ChakraCode, Stack, Text, useColorMode } from '@chakra-ui/react';
import { nightOwl, prism } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
// Constants, utilities
import { CLASSNAME_PREFIX } from '../../../constants';
import { getProgrammingLanguageName } from '../../../utils';
// Programming lang syntax highlighters
import bash from 'react-syntax-highlighter/dist/cjs/languages/prism/bash';
import go from 'react-syntax-highlighter/dist/cjs/languages/prism/go';
import graphql from 'react-syntax-highlighter/dist/cjs/languages/prism/graphql';
import java from 'react-syntax-highlighter/dist/cjs/languages/prism/java';
import javascript from 'react-syntax-highlighter/dist/cjs/languages/prism/javascript';
import json from 'react-syntax-highlighter/dist/cjs/languages/prism/json';
import python from 'react-syntax-highlighter/dist/cjs/languages/prism/python';
import sh from 'react-syntax-highlighter/dist/cjs/languages/prism/shell-session';
import solidity from 'react-syntax-highlighter/dist/cjs/languages/prism/solidity';
import swift from 'react-syntax-highlighter/dist/cjs/languages/prism/swift';
// syntax highlighting languages supported
SyntaxHighlighter.registerLanguage('bash', bash);
SyntaxHighlighter.registerLanguage('terminal', bash);
SyntaxHighlighter.registerLanguage('go', go);
SyntaxHighlighter.registerLanguage('graphql', graphql);
SyntaxHighlighter.registerLanguage('java', java);
SyntaxHighlighter.registerLanguage('javascript', javascript);
SyntaxHighlighter.registerLanguage('json', json);
SyntaxHighlighter.registerLanguage('python', python);
SyntaxHighlighter.registerLanguage('sh', sh);
SyntaxHighlighter.registerLanguage('solidity', solidity);
SyntaxHighlighter.registerLanguage('swift', swift);
interface Props {
code: any;
className: string
children: React.ReactNode
[key: string]: any
}
export const Code: FC<Props> = ({ code }) => {
export const Code: React.FC<Props> = ({ className, children, ...code }: any) => {
const { colorMode } = useColorMode();
const isDark = colorMode === 'dark';
const isTerminal = className?.includes('terminal') ;
if (code.inline)
return (
!!code.inline ?
(
<Text
as='span'
background='code-bg'
px={1}
color='primary'
bg='code-bg'
borderRadius='0.25em'
textStyle='inline-code-snippet'
pb={2}
mb={-2}
>
{code.children[0]}
{children[0]}
</Text>
)
:
(
);
if (isTerminal)
return (
<Stack>
<ChakraCode
overflow='auto'
p={6}
background='code-bg-contrast'
textStyle='code-block'
color='code-text'
background='terminal-bg'
color='terminal-text'
>
{code.children[0]}
{children[0]}
</ChakraCode>
</Stack>
)
);
if (className?.startsWith(CLASSNAME_PREFIX))
return (
<SyntaxHighlighter
language={getProgrammingLanguageName(className)}
style={isDark ? nightOwl : prism}
customStyle={{ borderRadius: '0.5rem', padding: '1rem' }}
>
{children}
</SyntaxHighlighter>
);
return <Stack>{children[0]}</Stack>;
};

Loading…
Cancel
Save