Function Code

apps/web/ui/Code/index.tsx:15–65

({
  className,
  content,
  language,
  highlight,
  inline,
  block,
}: Props)

}

function Code({
  className,
  content,
  language,
  highlight,
  inline,
  block,
}: Props): JSX.Element {
  const [highlighted, setHighlighted] = useState<any>();

  useEffect(() => {
    let mounted = true;
    if (highlight && !highlighted) {
      highlightCode(content, language).then((output) => {
        if (mounted) {
          setHighlighted(output);
        }
      });
    }
    return () => {
      mounted = false;
    };
  }, [highlight, highlighted, language]);

  if (highlighted) {
    return (
      <pre
        className={classNames('hljs', styles.pre, className, {
          [styles.block]: block,
          [styles.inline]: inline,
        })}
      >
        <code
          className={styles.code}
          dangerouslySetInnerHTML={{ __html: highlighted }}
        />
      </pre>
    );
  }

  return (
    <pre
      className={classNames(styles.pre, className, {
        [styles.block]: block,
        [styles.inline]: inline,
      })}
    >
      <code className={styles.code}>{content}</code>
    </pre>
  );
}

export default Code;