prism-react-renderer#defaultProps TypeScript Examples

Code = (props) => {
    const {
        children,
        className,
        inline,
    }: {
        children: string[];
        className?: string;
        inline: boolean;
    } = props;

    const lang = className ? className.split('-').pop() : 'js';
    const code = children[0].trim();

    return inline ? (
        <code className="block-markdown__code">{code}</code>
    ) : (
        <Highlight {...defaultProps} theme={theme} code={code} language={lang as Language}>
            {({ className, style, tokens, getLineProps, getTokenProps }) => (
                <pre className={`block-markdown__pre ${className}`} style={{ ...style }}>
                    {tokens.map((line, i) => (
                        <div key={i} {...getLineProps({ line, key: i })}>
                            {line.map((token, key) => (
                                <span key={key} {...getTokenProps({ token, key })} />
                            ))}
                        </div>
                    ))}
                </pre>
            )}
        </Highlight>
    );
}

Codeblock = (props) => {
    return (
        <Highlight {...defaultProps} code={props.code} language="tsx">
            {({ className, style, tokens, getLineProps, getTokenProps }) => (
                <pre className={className} style={style}>
                    {tokens.map((line, i) => (
                        <div {...getLineProps({ line, key: i })}>
                            {line.map((token, key) => (
                                <span {...getTokenProps({ token, key })} />
                            ))}
                        </div>
                    ))}
                </pre>
            )}
        </Highlight>
    )
}

CodeHighLight = ({ code, lang = 'jsx' }) => {
  return (
    <Highlight {...defaultProps} theme={theme} code={code} language={lang}>
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <pre className={className} style={{ ...style, height: '100%' }}>
          {tokens.map((line, i) => (
            <div {...getLineProps({ line, key: i })}>
              {line.map((token, key) => (
                <span {...getTokenProps({ token, key })} />
              ))}
            </div>
          ))}
        </pre>
      )}
    </Highlight>
  )
}

HomeHighLight = ({ code, lang = 'jsx' }) => {
  return (
    <Highlight {...defaultProps} theme={theme} code={code} language={lang}>
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <pre className={className} style={{ ...style, height: '100%' }}>
          {tokens.map((line, i) => (
            <Box key={i} toLeft>
              <Box
                bg="#292c3e--D2"
                px2
                w10
                mr5
                textRight
                pt4={i == 0}
                pb4={i === tokens.length - 1}
              >
                {i + 1}
              </Box>
              <Box
                {...getLineProps({ line, key: i })}
                mr5
                pt4={i == 0}
                pb4={i === tokens.length - 1}
              >
                {line.map((token, key) => (
                  <span {...getTokenProps({ token, key })} />
                ))}
              </Box>
            </Box>
          ))}
        </pre>
      )}
    </Highlight>
  )
}

Code = (props) => {
    const {
        children,
        className,
        inline,
    }: {
        children: string | string[];
        className?: string;
        inline: boolean;
    } = props;

    const lang = className ? className.split('-').pop() : 'js';
    const code = Array.isArray(children) ? children[0].trim() : children.trim();

    return inline ? (
        <code className="block-markdown__code">{code}</code>
    ) : (
        <Highlight {...defaultProps} theme={theme} code={code} language={lang as Language}>
            {({ className, style, tokens, getLineProps, getTokenProps }) => (
                <pre className={`block-markdown__pre ${className}`} style={{ ...style }}>
                    {tokens.map((line, i) => (
                        <div key={i} {...getLineProps({ line, key: i })}>
                            {line.map((token, key) => (
                                <span key={key} {...getTokenProps({ token, key })} />
                            ))}
                        </div>
                    ))}
                </pre>
            )}
        </Highlight>
    );
}

Highlight = ({
  code,
  theme = "dark",
}: {
  code: string
  theme?: "light" | "dark"
}) => (
  <div>
    {/* @ts-expect-error missing type for language "questdb-sql". We know it exists but Prism does not provide such type */}
    <Prism
      {...defaultProps}
      language="questdb-sql"
      code={code}
      theme={themes[theme]}
    >
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <pre className={className} style={style}>
          {tokens.map((line, i) => (
            <div key={i} {...getLineProps({ line, key: i })}>
              {line.map((token, key) => (
                <span key={key} {...getTokenProps({ token, key })} />
              ))}
            </div>
          ))}
        </pre>
      )}
    </Prism>
  </div>
)

PrismCode: React.FC<PrismCodeProps> = ({
  code,
  language = 'bash',
  theme = defaultTheme,
  copiable = false,
}) => (
  <Highlight {...defaultProps} code={code} language={language} theme={theme}>
    {({ className, style, tokens, getLineProps, getTokenProps }) => (
      <Text component={TextVariants.pre} className={className} style={style}>
        {copiable && (
          <ClipboardCopy
            isReadOnly
            variant={'inline-compact'}
            onCopy={(e) => clipboardCopyFunc(e, code)}
            style={{ float: 'right', background: 'inherit' }}
          >
            {}
          </ClipboardCopy>
        )}
        {tokens.map((line, i) => (
          <div key={i} {...getLineProps({ line, key: i })}>
            {line.map((token, key) => (
              <span key={key} {...getTokenProps({ token, key })} />
            ))}
          </div>
        ))}
      </Text>
    )}
  </Highlight>
)

CodeBlock: React.FC<{ code: string; language: Language }> = ({
  code,
  language
}) => (
  <Highlight {...defaultProps} code={code} language={language}>
    {({ className, style, tokens, getLineProps, getTokenProps }) => (
      <pre className={className} style={style}>
        {tokens.map((line, i) => (
          <div {...getLineProps({ line, key: i })}>
            {line.map((token, key) => (
              <span {...getTokenProps({ token, key })} />
            ))}
          </div>
        ))}
      </pre>
    )}
  </Highlight>
)

export function CodeHighlighter(props: ICodeHighlighterProps) {
  const { code, language } = props;
  return (
    <Highlight {...defaultProps} theme={theme} code={code} language={language}>
      {({ 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>
  );
}

export default function Code({
  code,
  language = 'javascript',
  selectedLines = [],
  withCopyButton = true,
  withLineNumbers,
  caption,
}: CodeProps) {
  const { copy, copied } = useClipboard({
    copiedTimeout: 600,
  });

  function handleCopyClick(code: string) {
    copy(code);
  }

  const copyButtonMarkup = (
    <ClientOnly>
      <CopyButton copied={copied} onClick={() => handleCopyClick(code)}>
        <CopyIcon />
      </CopyButton>
    </ClientOnly>
  );

  return (
    <>
      <Highlight {...defaultProps} theme={undefined} code={code} language={language}>
        {({ className, style, tokens, getLineProps, getTokenProps }) => (
          <>
            <CodeWrapper className="code-wrapper" language={language}>
              {withCopyButton && copyButtonMarkup}
              <Pre className={className} style={style}>
                {tokens.map((line, i) => {
                  const lineNumber = i + 1;
                  const isSelected = selectedLines.includes(lineNumber);
                  const lineProps = getLineProps({ line, key: i });
                  const className = lineProps.className + (isSelected ? ' selected-line' : '');

                  return (
                    <Line key={i} {...{ ...lineProps, className }}>
                      {withLineNumbers && <LineNo>{lineNumber}</LineNo>}
                      <LineContent>
                        {line.map((token, key) => (
                          <span key={key} {...getTokenProps({ token, key })} />
                        ))}
                      </LineContent>
                    </Line>
                  );
                })}
              </Pre>
            </CodeWrapper>
            {caption && <Caption>{caption}</Caption>}
          </>
        )}
      </Highlight>
    </>
  );
}

defaultHighlightProps = {
  ...defaultProps,
  theme: nightOwl,
}

Code = ({ code, language = 'tsx' }: CodeProps) => {
  return (
    <Root className={classes.root}>
      <CopyButton classNames={classes.copyButton} value={code} />
      <Highlight
        {...defaultProps}
        code={code.trim()}
        theme={theme}
        language={language}
      >
        {({ className, style, tokens, getLineProps, getTokenProps }) => (
          <Typography
            variant="body2"
            component="pre"
            className={className + ' ' + classes.pre}
            style={style}
          >
            {tokens.map((line, i) => {
              // Remove the last empty line:
              let LineNumberElem
              if (
                line.length === 1 &&
                line[0].empty === true &&
                i === tokens.length - 1
              ) {
                LineNumberElem = null
              } else {
                LineNumberElem = <span className={classes.line}>{i + 1}</span>
              }

              return (
                <div key={i} {...getLineProps({ line, key: i })}>
                  {LineNumberElem}
                  {line.map((token, key) => (
                    <span key={key} {...getTokenProps({ token, key })} />
                  ))}
                </div>
              )
            })}
          </Typography>
        )}
      </Highlight>
    </Root>
  )
}

function CodeBlock({ code, language, metastring, showLines, ...props }: HighlightProps) {
  const shouldHighlightLine = calculateLinesToHighlight(metastring);
  const { colorMode } = useColorMode();

  const backgroundColor =
    colorMode === 'light' ? uiTheme.colors.gray[100] : uiTheme.colors.gray[700];
  const codeTheme = colorMode === 'light' ? nightOwlLightTheme : nightOwlDarkTheme;

  const customizedCodeTheme = {
    ...codeTheme,
    plain: {
      ...codeTheme.plain,
      backgroundColor,
    },
  };

  return (
    <Box position="relative" zIndex="0" {...props}>
      <CodeContainer bg={backgroundColor}>
        <BaseHighlight
          {...defaultProps}
          code={code}
          language={language}
          theme={customizedCodeTheme}
          key={colorMode}
        >
          {({ className, style, tokens, getLineProps, getTokenProps }) => (
            <div style={editorStyle} data-language={language} key={colorMode}>
              <pre className={className} style={style}>
                {tokens.slice(0, -1).map((line, i) => {
                  const lineProps = getLineProps({ line, key: i });
                  return (
                    <chakra.div
                      px="4"
                      bg={shouldHighlightLine(i) ? 'whiteAlpha.200' : undefined}
                      {...lineProps}
                    >
                      {showLines && (
                        <chakra.span
                          opacity={0.3}
                          mr="4"
                          width="16px"
                          display="inline-block"
                          fontSize="xs"
                          style={{ userSelect: 'none' }}
                        >
                          {i + 1}
                        </chakra.span>
                      )}
                      {line.map((token, key) => (
                        <span {...getTokenProps({ token, key })} />
                      ))}
                    </chakra.div>
                  );
                })}
              </pre>
            </div>
          )}
        </BaseHighlight>
      </CodeContainer>
      <CopyButton
        size="sm"
        position="absolute"
        textTransform="uppercase"
        colorScheme="teal"
        fontSize="xs"
        height="24px"
        zIndex="1"
        top="2.5"
        right="1.25em"
        copyText={code}
        fontFamily={uiTheme.fonts.body}
        fontWeight="bold"
      />
    </Box>
  );
}

CodePanel = () => {
  const components = useSelector(getComponents)
  const [code, setCode] = useState<string | undefined>(undefined)

  useEffect(() => {
    const getCode = async () => {
      const code = await generateCode(components)
      setCode(code)
    }

    getCode()
  }, [components])

  const { onCopy, hasCopied } = useClipboard(code!)

  return (
    <Box
      zIndex={5}
      p={4}
      fontSize="sm"
      backgroundColor="#011627"
      overflow="auto"
      position="absolute"
      top={0}
      bottom={0}
      left={0}
      right={0}
    >
      <Button
        onClick={onCopy}
        size="sm"
        position="absolute"
        textTransform="uppercase"
        colorScheme="teal"
        fontSize="xs"
        height="24px"
        top={4}
        right="1.25em"
      >
        {hasCopied ? 'copied' : 'copy'}
      </Button>
      <Highlight
        {...defaultProps}
        theme={theme}
        code={code || '// Formatting code… please wait ✨'}
        language="jsx"
      >
        {({ className, style, tokens, getLineProps, getTokenProps }) => (
          <pre className={className} style={style}>
            {tokens.map((line, i) => (
              <div {...getLineProps({ line, key: i })}>
                {line.map((token, key) => (
                  <span {...getTokenProps({ token, key })} />
                ))}
              </div>
            ))}
          </pre>
        )}
      </Highlight>
    </Box>
  )
}

Code = ({
    value = '',
    hideLinesNumbers = false,
    onChange = (x) => x,
    style = {},
    readOnly = false,
    language = 'graphql' as const,
    ...rest
}) => {
    // console.log({rest, live})

    const highlightCode = useCallback(
        (code) => {
            return (
                <Highlight
                    {...defaultProps}
                    theme={prismTheme}
                    code={code}
                    language={language}
                >
                    {({
                        className,
                        // style,
                        tokens,
                        getLineProps,
                        getTokenProps,
                    }) => (
                        <Box
                            flexShrink={0}
                            overflow='visible'
                            // direction='column'
                            // spacing='0'
                            // p='20px'
                            // pt='30px'
                            // borderRadius='8px'
                            as='pre'
                            fontFamily={CODE_FONT}
                            // fontSize='0.9em'
                            // style={{ ...style }}
                            // overflowX='auto'
                            fontWeight='500'
                            className={className}
                            style={style}
                            // {...rest}
                        >
                            {tokens.map((line, i) => (
                                <div
                                    key={i}
                                    {...getLineProps({ line, key: i })}
                                >
                                    {!hideLinesNumbers && (
                                        <Box
                                            d='inline-block'
                                            position='absolute'
                                            left='0px'
                                            textAlign='right'
                                            minW='40px'
                                            opacity={0.4}
                                            pr='40px'
                                            pl='20px'
                                        >
                                            {i + 1}
                                        </Box>
                                    )}
                                    {line.map((token, key) => (
                                        <span
                                            key={key}
                                            {...getTokenProps({ token, key })}
                                        />
                                    ))}
                                </div>
                            ))}
                        </Box>
                    )}
                </Highlight>
            )
        },
        [value, onChange],
    )

    return (
        <Flex
            shadow='sm'
            overflowX='auto'
            overflowY='visible'
            height='auto'
            bg='gray.50'
            // align='stretch'
            borderRadius='8px'
            css={css`
                textarea {
                    border: none;
                    overflow: auto;
                    outline: none;
                    
                    -webkit-box-shadow: none;
                    -moz-box-shadow: none;
                    box-shadow: none;
                }
            `}
            {...rest}
        >
            <Editor
                value={value}
                padding={60}
                highlight={highlightCode}
                onValueChange={onChange}
                readOnly={readOnly}
                minLength={20}
                style={{
                    whiteSpace: 'pre',
                    overflow: 'visible',
                    // width: '100%',
                    // overflowX: 'auto',
                    // margin: '-40px 0',
                    fontFamily: CODE_FONT,
                    ...style,
                }}
            />
        </Flex>
    )
}

Prism: PrismComponent = forwardRef<HTMLDivElement, PrismProps>(
  (props: PrismProps, ref) => {
    const {
      className,
      children,
      language,
      noCopy,
      classNames,
      styles,
      copyLabel,
      copiedLabel,
      withLineNumbers,
      highlightLines,
      scrollAreaComponent: ScrollAreaComponent,
      colorScheme,
      trim,
      ...others
    } = useMantineDefaultProps('Prism', prismDefaultProps, props);
    const code = trim && typeof children === 'string' ? children.trim() : children;
    const maxLineSize = code.split('\n').length.toString().length;

    const theme = useMantineTheme();
    const clipboard = useClipboard();
    const { classes, cx } = useStyles(
      {
        colorScheme: colorScheme || theme.colorScheme,
        native: ScrollAreaComponent !== ScrollArea,
        maxLineSize,
      },
      { classNames, styles, name: 'Prism' }
    );

    return (
      <Box className={cx(classes.root, className)} ref={ref} {...others}>
        {!noCopy && (
          <Tooltip
            className={classes.copy}
            label={clipboard.copied ? copiedLabel : copyLabel}
            position="left"
            placement="center"
            transition="fade"
            withArrow
            arrowSize={4}
            gutter={8}
            color={clipboard.copied ? 'teal' : 'gray'}
          >
            <ActionIcon
              aria-label={clipboard.copied ? copiedLabel : copyLabel}
              onClick={() => clipboard.copy(code)}
            >
              <CopyIcon copied={clipboard.copied} />
            </ActionIcon>
          </Tooltip>
        )}

        <Highlight
          {...defaultProps}
          theme={getPrismTheme(theme, colorScheme || theme.colorScheme)}
          code={code}
          language={language}
        >
          {({
            className: inheritedClassName,
            style: inheritedStyle,
            tokens,
            getLineProps,
            getTokenProps,
          }) => (
            <ScrollAreaComponent className={classes.scrollArea} dir="ltr">
              <pre
                className={cx(classes.code, inheritedClassName)}
                style={inheritedStyle}
                dir="ltr"
              >
                {tokens
                  .map((line, index) => {
                    if (
                      index === tokens.length - 1 &&
                      line.length === 1 &&
                      line[0].content === '\n'
                    ) {
                      return null;
                    }

                    const lineNumber = index + 1;
                    const lineProps = getLineProps({ line, key: index });
                    const shouldHighlight = lineNumber in highlightLines;
                    const lineColor =
                      theme.colorScheme === 'dark'
                        ? theme.fn.rgba(
                            theme.fn.themeColor(highlightLines[lineNumber]?.color, 9),
                            0.25
                          )
                        : theme.fn.themeColor(highlightLines[lineNumber]?.color, 0);

                    return (
                      <div
                        {...lineProps}
                        className={cx(classes.line, lineProps.className)}
                        style={{ ...(shouldHighlight ? { backgroundColor: lineColor } : null) }}
                      >
                        {withLineNumbers && (
                          <div
                            className={classes.lineNumber}
                            style={{
                              color: shouldHighlight
                                ? theme.fn.themeColor(
                                    highlightLines[lineNumber]?.color,
                                    theme.colorScheme === 'dark' ? 5 : 8
                                  )
                                : undefined,
                            }}
                          >
                            {highlightLines[lineNumber]?.label || lineNumber}
                          </div>
                        )}

                        <div className={classes.lineContent}>
                          {line.map((token, key) => {
                            const tokenProps = getTokenProps({ token, key });
                            return (
                              <span
                                {...tokenProps}
                                style={{
                                  ...tokenProps.style,
                                  color: shouldHighlight
                                    ? theme.fn.themeColor(
                                        highlightLines[lineNumber]?.color,
                                        theme.colorScheme === 'dark' ? 5 : 8
                                      )
                                    : (tokenProps?.style?.color as string),
                                }}
                              />
                            );
                          })}
                        </div>
                      </div>
                    );
                  })
                  .filter(Boolean)}
              </pre>
            </ScrollAreaComponent>
          )}
        </Highlight>
      </Box>
    );
  }
) as any

Code = ({
  language,
  custom = true,
  value,
  children,
  className,
  ...rest
}) => {
  const [copied, setCopied] = useState(false);
  if (className && className.startsWith("language-")) {
    language = className.replace("language-", "");
  }

  const handleCopy = useCallback(() => {
    try {
      navigator.clipboard.writeText(children);
      setCopied(true);
    } catch (error) {
      console.error(error);
    }
  }, []);

  useEffect(() => {
    if (copied) {
      const timeout = setTimeout(() => {
        setCopied(false);
      }, 3000);
      return () => {
        clearTimeout(timeout);
      };
    }
  }, [copied]);

  const theme = useMemo(() => {
    return {
      plain: {
        backgroundColor: custom ? "#3B375A" : "#9CDCFE",
        color: custom ? "#fff" : "#1E1E1E",
      },
      styles: [
        {
          types: ["comment", "prolog", "doctype", "cdata", "punctuation"],
          style: {
            color: custom ? "#8782AC" : "rgb(0, 0, 128)",
          },
        },
        {
          types: ["namespace"],
          style: {
            opacity: 0.7,
          },
        },
        {
          types: ["tag", "operator", "number"],
          style: {
            color: custom ? "#C16AB9" : "rgb(181, 206, 168)",
          },
        },
        {
          types: ["property", "function"],
          style: {
            color: custom ? "#C4ED98" : "rgb(220, 220, 170)",
          },
        },
        {
          types: ["tag-id", "selector", "atrule-id"],
          style: {
            color: custom ? "#C4ED98" : "rgb(215, 186, 125)",
          },
        },
        {
          types: ["attr-name"],
          style: {
            color: custom ? "#C4ED98" : "rgb(156, 220, 254)",
          },
        },
        {
          types: [
            "boolean",
            "string",
            "entity",
            "url",
            "attr-value",
            "keyword",
            "control",
            "directive",
            "unit",
            "statement",
            "regex",
            "at-rule",
            "placeholder",
            "variable",
          ],
          style: {
            color: custom ? "#C4ED98" : "rgb(206, 145, 120)",
          },
        },
        {
          types: ["deleted"],
          style: {
            textDecorationLine: "line-through",
          },
        },
        {
          types: ["inserted"],
          style: {
            textDecorationLine: "underline",
          },
        },
        {
          types: ["italic"],
          style: {
            fontStyle: "italic",
          },
        },
        {
          types: ["important", "bold"],
          style: {
            fontWeight: "bold",
          },
        },
        {
          types: ["important"],
          style: {
            color: "#c4b9fe",
          },
        },
      ],
    };
  }, [custom]);

  return (
    <Highlight
      {...defaultProps}
      {...rest}
      code={value ?? children}
      language={language}
      // @ts-ignore
      theme={theme}>
      {({ tokens, getLineProps, getTokenProps }) => (
        <Box
          as="pre"
          className="codeblock-pre-container"
          css={{
            bc: custom ? "#3B375A" : "",
            borderRadius: custom ? "16px" : "",
            width: "100%",
            maxWidth: "calc(100vw - 64px)",
            display: "flex",
            flexDirection: "column",
            marginBottom: custom ? "56px" : "",
            padding: custom ? "24px 16px 60px 24px" : "",
            position: "relative",
          }}>
          <Box css={{ maxWidth: "100%", overflowX: "auto" }}>
            {tokens.map((line, i) => {
              // Workaround for MDX rendering trailing lines on everything
              const lastLine = i === tokens.length - 1;
              return (
                <Box key={i} {...getLineProps({ line, key: i })}>
                  {line.map((token, key) => {
                    if (lastLine && token.empty) {
                      return null;
                    }
                    return (
                      <span key={key} {...getTokenProps({ token, key })} />
                    );
                  })}
                </Box>
              );
            })}
          </Box>
          {custom && (
            <Box
              as="button"
              onClick={handleCopy}
              css={{
                position: "absolute",
                alignSelf: "flex-end",
                bottom: "16px",
                right: "16px",
                bc: "$violet9",
                borderRadius: "6px",
                width: "60px",
                height: "32px",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                color: "white",
                fontSize: "14px",
                fontWeight: 500,
                letterSpacing: "-0.03em",
                cursor: "pointer",
                outline: "none",
                ":focus": {
                  outline: "none",
                },
              }}>
              {copied ? "Copied" : "Copy"}
            </Box>
          )}
        </Box>
      )}
    </Highlight>
  );
}