text: import React from "react"
  import Highlight, { defaultProps } from "prism-react-renderer"
  import theme from "prism-react-renderer/themes/duotoneLight"
  import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live"
  
  export const Code = ({ codeString, language, ...props }) => {
    if (props["react-live"]) {
      return (
        <LiveProvider code={codeString} noInline={true}>
          <LiveEditor />
          <LiveError />
          <LivePreview />
        </LiveProvider>
      )
    } else {
      return (
        <Highlight
          {...defaultProps}
          code={codeString}
          language={language}
          theme={theme}
        >
          {({ className, style, tokens, getLineProps, getTokenProps }) => (
            <pre
              className={className}
              style={{
                ...style,
                padding: "1rem",
              }}
            >
              {tokens.map((line, i) => (
                <div {...getLineProps({ line, key: i })}>
                  {line.map((token, key) => (
                    <span {...getTokenProps({ token, key })} />
                  ))}
                </div>
              ))}
            </pre>
          )}
        </Highlight>
      )
    }
  }
  