Code JSX

code.jsx

import Highlight, { defaultProps } from 'prism-react-renderer';
import prismTheme from 'prism-react-renderer/themes/duotoneDark';

/* Use like 
<Code>{`
var foo = "blah";
`}</Code>
or
<Code code={myCodeString} />
*/
export const Code = ({ code, children }) => (
  <Highlight
    theme={prismTheme}
    code={code || children}
    language="typescript"
  >
    {({ className, style, tokens, getLineProps, getTokenProps }) => (
      <pre className={className} style={style}>
        {tokens.map((line, i) => (
          <div key="fake-key" {...getLineProps({ line, key: i })}>
            {line.map((token, key) => (
              <span key="fake-key" {...getTokenProps({ token, key })} />
            ))}
          </div>
        ))}
      </pre>
    )}
  </Highlight>
);