feat: Format code in code snippet where possible

src/components/CodeSnippet.js

@@ -4,6 +4,7 @@ import Highlight, { defaultProps } from 'prism-react-renderer';
 import github from 'prism-react-renderer/themes/github';
 import styles from './CodeSnippet.module.scss';
 import cx from 'classnames';
+import useFormattedCode from '../hooks/useFormattedCode';
 
 const copyCode = (code, setCopied) => {
   const textArea = document.createElement('textarea');
@@ -18,14 +19,15 @@ const copyCode = (code, setCopied) => {
 const CodeSnippet = ({ children, copy, className, lineNumbers }) => {
   const language = className.replace('language-', '');
   const [copied, setCopied] = useState(false);
+  const formattedCode = useFormattedCode(children);
 
   return (
     <div>
       <div className={styles.container}>
         <Highlight
           {...defaultProps}
           theme={github}
-          code={children}
+          code={formattedCode}
           language={language}
         >
           {({ style, tokens, getLineProps, getTokenProps }) => (

src/hooks/useFormattedCode.js

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import formatCode from '../utils/formatCode';
+
+const useFormattedCode = (code, options) => {
+  return useMemo(() => {
+    try {
+      return formatCode(code, options);
+    } catch (e) {
+      return code;
+    }
+  }, [code, options]);
+};
+
+export default useFormattedCode;