text: import * as React from 'react';
  import Highlight, { defaultProps } from 'prism-react-renderer';
  // Original: https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-ghcolors.css
  
  /*:: import type { PrismTheme } from '../src/types' */
  const theme =
    /*: PrismTheme */
    {
      plain: {
        color: '#293742',
        borderRadius: 12,
        fontFamily: `SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace`,
        fontSize: 14,
        lineHeight: '1.5',
      },
      styles: [
        {
          types: ['comment', 'prolog', 'doctype', 'cdata'],
          style: {
            color: '#A7B6C2',
            fontStyle: 'italic',
          },
        },
        {
          types: ['namespace'],
          style: {
            opacity: 0.7,
          },
        },
        {
          types: ['string', 'attr-value'],
          style: {
            color: '#DB2C6F',
          },
        },
        {
          types: ['punctuation', 'operator'],
          style: {
            color: '#394B59',
          },
        },
        {
          types: [
            'entity',
            'url',
            'symbol',
            'number',
            'boolean',
            'variable',
            'constant',
            'property',
            'regex',
            'inserted',
          ],
          style: {
            color: '#36acaa',
          },
        },
        {
          types: ['atrule', 'keyword', 'attr-name', 'selector'],
          style: {
            color: '#00B3A4',
          },
        },
        {
          types: ['function', 'deleted', 'tag'],
          style: {
            color: '#DB2C6F',
          },
        },
        {
          types: ['function-variable'],
          style: {
            color: '#634DBF',
          },
        },
        {
          types: ['tag', 'selector', 'keyword'],
          style: {
            color: '#1a56db',
          },
        },
      ],
    };
  
  const Code = ({
    children,
    codeString,
    className = 'language-js',
    ...props
  }) => {
    const language = className.replace(/language-/, '');
    return (
      <Highlight
        {...defaultProps}
        code={children.trim()}
        language={language}
        theme={theme}
      >
        {({ className, style, tokens, getLineProps, getTokenProps }) => (
          <pre
            className={className + ' bg-gray-50 pb-4 pt-4 pr-4 overflow-scroll'}
            style={{
              ...style,
              border: '1px solid #eee',
              fontSize: 13,
              lineHeight: '1.5',
            }}
          >
            {tokens.map((line, i) => (
              <div
                key={i}
                {...getLineProps({
                  line,
                  key: i,
                })}
              >
                {tokens.length > 1 ? (
                  <span
                    aria-hidden='true'
                    className='select-none text-gray-300 text-right w-5 inline-block mx-2'
                  >
                    {i + 1}
                  </span>
                ) : (
                  <span className='mx-2 w-5' />
                )}{' '}
                {line.map((token, key) => (
                  <span
                    key={key}
                    {...getTokenProps({
                      token,
                      key,
                    })}
                  />
                ))}
              </div>
            ))}
          </pre>
        )}
      </Highlight>
    );
  };
  
  export default Code;
  