Adding Prism

2020 August 3rd

I follow the tutorial to add syntax highlighting to the code blocks in the MDX files. I have to say, I love the way the code blocks look in the published blog, but I'm not a huge fan of the code itself. It uses prism-react-renderer to apply the styles and I must say it looks like a lot more effort than just including PrismJS and linking to a theme in the gatsby-browser.js file. The main code that I have a problem with is the Code.jsx file:

1export const Code = ({ codeString, language }) => {
2  const handleClick = () => {
3    copyToClipboard(codeString);
4  };
5
6  return (
7    <Highlight {...defaultProps} code={codeString} language={language} theme={theme}>
8      {({ className, style, tokens, getLineProps, getTokenProps }) => (
9        <Pre className={className} style={style}>
10          <CopyCode onClick={handleClick}>Copy</CopyCode>
11          {tokens.map((line, i) => (
12            <div key={line} {...getLineProps({ line, key: i })}>
13              <LineNo>{i + 1}</LineNo>
14              {line.map((token, key) => (
15                <span key="token" {...getTokenProps({ token, key })} />
16              ))}
17            </div>
18          ))}
19        </Pre>
20      )}
21    </Highlight>
22  );
23};

Specifically, I'm having a hard time wrapping my head around the component contained withing the <Highlight... /> component. In the line {({ className, style, tokens, getLineProps, getTokenProps }), where did those props come from? This is a kind of magic that I'm not usually a fan of. I like to be able to read my code and see explicitly where everything comes from. After reading the documentation for prism-react-renderer, however, it's clear to me that the <Highlight... /> component returns a highlight object and applies it to its child component. All of those props are part of that highlight object. I take learning something new as a win, and decide that I'll try a version with just PrismJS at some point in the future.