mirror of
https://github.com/ethereum/go-ethereum.git
synced 2026-02-28 00:27:26 +00:00
77 lines
2.9 KiB
TypeScript
77 lines
2.9 KiB
TypeScript
// Libraries
|
|
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 {
|
|
className: string;
|
|
children: string[];
|
|
inline?: boolean;
|
|
}
|
|
export const Code: React.FC<Props> = ({ className, children, inline }) => {
|
|
const { colorMode } = useColorMode();
|
|
const isDark = colorMode === 'dark';
|
|
const isTerminal = className?.includes('terminal');
|
|
const [content] = children;
|
|
if (inline)
|
|
return (
|
|
<Text
|
|
as='span'
|
|
px={1}
|
|
color='primary'
|
|
bg='code-bg'
|
|
borderRadius='0.25em'
|
|
textStyle='inline-code-snippet'
|
|
>
|
|
{content}
|
|
</Text>
|
|
);
|
|
if (isTerminal)
|
|
return (
|
|
<Stack>
|
|
<ChakraCode overflow='auto' p={6} background='terminal-bg' color='terminal-text'>
|
|
{content}
|
|
</ChakraCode>
|
|
</Stack>
|
|
);
|
|
if (className?.startsWith(CLASSNAME_PREFIX))
|
|
return (
|
|
<SyntaxHighlighter
|
|
language={getProgrammingLanguageName(className)}
|
|
style={isDark ? nightOwl : prism}
|
|
customStyle={{ borderRadius: '0.5rem', padding: '1rem' }}
|
|
>
|
|
{content}
|
|
</SyntaxHighlighter>
|
|
);
|
|
return <Stack>{content}</Stack>;
|
|
};
|