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.
This commit is contained in:
Paul Wackerow
parent
575b1b507b
commit
f09d02aecd
|
|
@ -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 }) => {
|
||||
return (
|
||||
!!code.inline ?
|
||||
(
|
||||
<Text
|
||||
as='span'
|
||||
background='code-bg'
|
||||
textStyle='inline-code-snippet'
|
||||
pb={2}
|
||||
mb={-2}
|
||||
>
|
||||
{code.children[0]}
|
||||
</Text>
|
||||
)
|
||||
:
|
||||
(
|
||||
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 (
|
||||
<Text
|
||||
as='span'
|
||||
px={1}
|
||||
color='primary'
|
||||
bg='code-bg'
|
||||
borderRadius='0.25em'
|
||||
textStyle='inline-code-snippet'
|
||||
>
|
||||
{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…
Reference in New Issue