MarkdownSyntaxHighlighter = ({
  className,
  node,
  children,
  inline,
  ...props
}) => {
  const showInfoToast = useToast();
  const { highlighter_theme } = useGlobalSettings();

  const match = /language-(\w+)/.exec(className || '');

  return match ? (
    <div className={styles.container}>
      <SyntaxHighlighter
        className={styles.codeWrapper}
        children={String(children).replace(/\n$/, '')}
        /**
         * NOTE: Import highlighter theme that user picked in settings
         */
        style={
          require(`react-syntax-highlighter/dist/esm/styles/hljs/${highlighter_theme}`)
            .default
        }
        language={match[1]}
        wrapLongLines
        PreTag="div"
        {...props}
      />
      <CopyToClipboard
        text={children}
        onCopy={() => showInfoToast('Copied to Clipboard')}
      >
        <IconButton
          className={styles.copy}
          icon={CopyIcon}
          iconProps={{ className: styles.icon }}
        />
      </CopyToClipboard>
    </div>
  ) : (
    <code className={styles.inline} {...props}>
      <span className={styles.inlineContent}>{children}</span>
    </code>
  );
}
NOTE: Import Light version of HighlightJS highlighter.
Import only the languages we need and register them to
the HighlightJS highlighter (html works by default).
This keeps the overall build lighter.